Benchmark: spread vs mutation vs Object.assign for reduce callback

Tests:

with spread operator
const range = (from, to) => { const output = [] for(var x = from; x < to; x++){ output.push(x) } return output } range(0, 10).reduce((acc, num) => { return { ...acc, [num]: num } }, {})
with mutation
const range = (from, to) => { const output = [] for(var x = from; x < to; x++){ output.push(x) } return output } range(0, 10).reduce((acc, num) => { acc[num] = num return acc }, {})
with object assign
const range = (from, to) => { const output = [] for(var x = from; x < to; x++){ output.push(x) } return output } range(0, 10).reduce((acc, num) => { return Object.assign(acc, {[num]: num}) }, {})

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
with spread operator
with mutation
with object assign

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 18_5_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/136.0.7103.91 Mobile/15E148 Safari/604.1

Browser/OS: Chrome Mobile iOS 136 on iOS 18.5.0

View result in a separate tab

Test name	Executions per second
with spread operator	229066.3 Ops/sec
with mutation	3071735.0 Ops/sec
with object assign	305275.3 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript benchmarks!

**Benchmark Overview**

The provided JSON represents a benchmark test for comparing three approaches to updating an object in a reduce callback function:

1. **Mutation**: Directly modifying the accumulator object by assigning a new property directly.
2. **Spread Operator**: Using the spread operator (`{...acc, [num]: num}`) to create a new object with the updated property.
3. **Object.assign**: Using the `Object.assign` method to merge an object into the accumulator.

**Options Compared**

The benchmark tests these three approaches for updating an object in a reduce callback function, which is likely used in various scenarios like data aggregation or transformation. The test measures the performance differences between these approaches on different browsers and devices.

**Pros and Cons of Each Approach:**

1. **Mutation**: Simple and straightforward, but can be slower due to the direct modification of the accumulator object.
	* Pros: Easy to understand and implement.
	* Cons: May lead to unexpected side effects or pollute the accumulator object's namespace.
2. **Spread Operator**: Creates a new object with the updated property, which can lead to faster performance due to less overhead.
	* Pros: More efficient than mutation, and avoids potential side effects.
	* Cons: Can be less readable for those not familiar with the spread operator.
3. **Object.assign**: Merges an object into the accumulator, providing a more controlled way of updating properties.
	* Pros: More explicit and predictable than mutation or the spread operator.
	* Cons: May incur additional overhead due to the method call.

**Library Used**

None explicitly mentioned in the provided JSON. However, it's likely that the benchmark script uses built-in JavaScript features like `reduce` and `Object.assign`.

**Special JS Feature/Syntax**

The use of the spread operator (`{...acc, [num]: num}`) is a relatively recent feature introduced in ECMAScript 2018 (ES2018). It allows for concise object creation by spreading existing objects into new ones.

**Alternative Approaches**

Other approaches to updating an object in a reduce callback function might include:

* Using a temporary object to store the updated properties and then merging it with the accumulator.
* Recreating the entire accumulator object with each update, which would be less efficient due to increased memory allocation and garbage collection.

In summary, this benchmark test provides valuable insights into the performance differences between various approaches to updating an object in a reduce callback function. By understanding these pros and cons, developers can make informed decisions about the best approach for their specific use case.

Related benchmarks:

spread vs mutation vs Object.assign for reduce callback (version: 0)

Comparing performance of: with spread operator vs with mutation vs with object assign

Created: 7 years ago by: Guest

Jump to the latest result

with spread operator

with mutation

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