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) =>  ({...obj, [u.id]: u}), {})
}

var pages = [createArray(1, 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	1671.4 Ops/sec
Object.assign	1697.8 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 provided benchmark and explain what's being tested.

**Benchmark Definition**

The benchmark is designed to compare two approaches for merging an array of objects into a single object:

1. Using `Array.prototype.reduce()` method.
2. Using `Object.assign()` method.

The benchmark definition provides two test cases, each with its own script preparation code:

* The first test case uses `reduce()`, which takes an initial value (an empty object `{}`) and applies a callback function to each element in the array. The callback function merges the current object (`u`) into the accumulator (`obj`) by spreading the properties of `u` into `obj`.
* The second test case uses `Object.assign()`, which takes multiple arguments (an initial value `{}` and an array of objects) and returns a new object with the merged properties.

**Options Compared**

The benchmark compares the performance of these two approaches for merging an array of objects. Specifically, it's measuring:

1. **`Array.prototype.reduce()`**: This method is used to reduce an array to a single value (in this case, a merged object). It has several advantages:
	* Flexibility: allows for custom callback functions to handle different data structures.
	* Memory efficiency: creates a new accumulator object each time through the iteration, reducing memory allocations.
2. **`Object.assign()`**: This method is specifically designed for merging objects. Its main advantage is:
	* Simplicity: only requires a single function call with multiple arguments.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

1. `Array.prototype.reduce()`:
	* Pros: flexible, memory-efficient, can handle different data structures.
	* Cons: may require more code to implement, can be slower due to the overhead of creating an accumulator object.
2. `Object.assign()`**:
	* Pros: simple, fast, designed specifically for merging objects.
	* Cons: limited flexibility, requires a specific shape for input data.

**Library and Special JS Feature**

Neither `Array.prototype.reduce()` nor `Object.assign()` rely on any specific JavaScript libraries or features beyond the standard ECMAScript syntax. They are both widely supported across modern browsers and Node.js environments.

However, it's worth noting that some older browsers may have limited support for `reduce()`, while newer versions of Edge may not support `Object.assign()` due to security concerns.

**Other Considerations**

When choosing between these two approaches, consider the specific requirements of your use case:

* If you need flexibility in handling different data structures or want a more memory-efficient solution, `Array.prototype.reduce()` might be the better choice.
* If you're working with a large number of objects and performance is critical, `Object.assign()` could provide faster results due to its optimized implementation.

Keep in mind that this benchmark only compares these two approaches for merging an array of objects. Depending on your specific requirements, other options like using a library like Lodash or Ramda might be more suitable.

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):