Benchmark: flatten merge array: reduce VS Object.assign

Script Preparation code:

function createArray(k, propsCount) {
    const arr = []
    for (let i = 0; i < propsCount; i += 1) {
        arr.push({
            id: k * i,
            active: i % 5 === 0
        })
    }
    return arr.reduce((obj, u) =>  ({[u.id]: u}), {})
}

var pages = [createArray(0, 1000),createArray(10,1000),createArray(100,1000)]

Tests:

Reduce
allusers = pages.reduce((store, page) => ({...store, ...page}), {})
Object.assign
allUsers = Object.assign({}, ...pages.flat())

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Reduce
Object.assign

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36

Browser/OS: Chrome 122 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Reduce	682735.9 Ops/sec
Object.assign	926961.9 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what is being tested.

**Benchmark Overview**

The benchmark compares two approaches to flatten an array of objects into a single object using either the `reduce` method or `Object.assign`. The input data consists of three arrays of objects, each with 1000 elements. Each element in the array has an `id` property and an `active` property.

**Options Compared**

Two options are being compared:

1. **Reduce**: This approach uses the `reduce` method to iterate over the flattened array and merge it into a single object.
2. **Object.assign**: This approach uses the spread operator (`...`) to flatten the array of objects into an array, and then passes that array to `Object.assign` to create a new object.

**Pros and Cons**

Here are some pros and cons of each approach:

**Reduce**

Pros:

* Efficient: The `reduce` method is optimized for performance and can take advantage of browser caching.
* Flexible: Can handle arrays with any structure or depth.

Cons:

* May not be as readable as other approaches.
* Requires understanding of the `reduce` method signature.

**Object.assign**

Pros:

* Readable: Uses a familiar syntax and is easy to understand.
* Simple: Only requires passing an array of objects to `Object.assign`.

Cons:

* May have performance implications due to the creation of intermediate arrays.
* Does not support nested object properties (due to browser limitations).

**Library Usage**

In this benchmark, neither library is explicitly used. However, it's worth noting that modern browsers like Chrome provide optimized implementations of these functions.

**Special JS Feature or Syntax**

This benchmark does not use any special JavaScript features or syntax, making it accessible to a wide range of developers.

**Other Alternatives**

Some alternative approaches to flatten an array of objects include:

* Using `Array.prototype.reduce()` with a custom callback function.
* Utilizing libraries like Lodash (`_.flatten` and `_merge`) or Underscore.js (`_.reduce`).
* Implementing a simple recursive function to merge the arrays.

**Benchmark Preparation Code**

The provided script preparation code creates three arrays of objects using a `createArray` function. Each array is then used in one of two benchmark definitions: "Reduce" and "Object.assign". The "allUsers" variable is created by either applying the `reduce` method or passing an array to `Object.assign`.

**Individual Test Cases**

The individual test cases are simple scripts that create the same input data as the script preparation code and execute it using the specified benchmark definition.

Related benchmarks:

flatten merge array: reduce VS Object.assign (version: 0)

Comparing performance of: Reduce vs Object.assign

Created: 2 years ago by: Guest

Jump to the latest result

Reduce

Object.assign

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):