Benchmark: spread vs mutation vs Object.assign for reduce

Tests:

with spread operator
const range = (from, to) => { const output = [] for(var x = from; x < to; x++){ output.push(x) } return output } range(0, 10000).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, 10000).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, 10000).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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

Browser/OS: Chrome 135 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
with spread operator	127.5 Ops/sec
with mutation	15412.2 Ops/sec
with object assign	393.0 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 benchmark and explain what is being tested.

**Benchmark Overview**

The benchmark compares the performance of three approaches for reducing an object in JavaScript:

1. **Mutation**: Directly modifying the original object by assigning a new property to it.
2. **Object Assign**: Using the `Object.assign()` method to merge two objects, where one of them is the original object and the other is an object with a single property.
3. **Spread Operator**: Using the spread operator (`{...}`) to create a new object that includes all the properties of the original object.

**Options Compared**

The benchmark compares these three approaches because they have different performance characteristics:

* Mutation has high overhead due to the creation and assignment of a new property, which can lead to slower execution.
* Object Assign is generally faster than mutation but may still incur some overhead due to the function call and object merging process.
* Spread Operator is typically the fastest approach because it creates a shallow copy of the original object using a single operation.

**Pros and Cons**

Here are the pros and cons of each approach:

* **Mutation**: Pros: simple and efficient. Cons: can be slower due to property creation and assignment overhead.
* **Object Assign**: Pros: generally faster than mutation but may incur some overhead due to function call and object merging. Cons: less efficient than spread operator.
* **Spread Operator**: Pros: typically the fastest approach due to shallow copy creation using a single operation. Cons: may require more memory for the new object.

**Library and Special JS Feature**

The benchmark uses none of a library, but it does use the `Object.assign()` method, which is a built-in JavaScript function.

**Special JS Feature**

There are no special JavaScript features used in this benchmark. The code relies on standard JavaScript syntax and semantics.

**Other Alternatives**

If you were to rewrite this benchmark, you could consider using alternative approaches:

* **Destructuring**: You could use destructuring assignment to create a new object with only the desired properties.
* **Object Literal**: You could use an object literal to define the initial state of the object and then add new properties to it.
* **Array Methods**: You could use array methods like `reduce()` or `forEach()` to iterate over the range and create a new object.

Keep in mind that these alternatives might have different performance characteristics compared to the original benchmark.

Related benchmarks:

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

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

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