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}) }, {})

Historical Performance Data aggregated from 19 community runs

Desktop Results:

Chrome 19 runs

with mutation

8.0M/s

with spread operator

1.7M/s

with object assign

375K/s

Fastest: with mutation (21.3x faster)

View exact numbers

✓ with mutation: 7,991,277 ops/sec
• with spread operator: 1,679,302 ops/sec
• with object assign: 374,603 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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

with mutation

3.1M/s

with object assign

305K/s

with spread operator

229K/s

View exact numbers

Test name	Executions per second
✓ with mutation	3,071,735 Ops/sec
with object assign	305,275 Ops/sec
with spread operator	229,066 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.

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: 8 years ago by: Guest

Go to the latest result

with spread operator

with mutation

with object assign

Historical Performance Data aggregated from 19 community runs

Desktop Results:

Chrome 19 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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: 8 years ago by: Guest

Go to the latest result

with spread operator

with mutation

with object assign

Historical Performance Data aggregated from 19 community runs

Desktop Results:

Chrome 19 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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