Benchmark: spread vs mutation vs Object.assign for reduce callback (100 elem)

Tests:

with spread operator
const range = (from, to) => { const output = [] for(var x = from; x < to; x++){ output.push(x) } return output } range(0, 100).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, 100).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, 100).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: 2 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36

Browser/OS: Chrome 105 on Windows

View result in a separate tab

Test name	Executions per second
with spread operator	82202.1 Ops/sec
with mutation	577110.0 Ops/sec
with object assign	12696.4 Ops/sec

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

LLMs can make mistakes. Check important info.

I'd be happy to explain the benchmark and its various aspects.

**Benchmark Overview**

The provided benchmark compares three approaches for modifying an object in a reduce callback function:

1.  Using the spread operator (`...`)
2.  Mutating the accumulator directly
3.  Using `Object.assign()` to merge the accumulator with new properties

These approaches are compared in terms of performance, and the benchmark results show which approach is faster.

**Approach 1: Spread Operator**

The spread operator (`...`) is used to create a shallow copy of an object. In this case, it's used to add a new property `num` to the accumulator object with value `num`.

Pros:

*   Easy to read and write
*   Creates a shallow copy of the original object

Cons:

*   May be slower due to the creation of a new object reference
*   May not work correctly for nested objects or arrays

**Approach 2: Mutation**

In this approach, the accumulator is modified directly by assigning a new property `num` to it. This can potentially lead to unexpected behavior if the accumulator is used elsewhere in the code.

Pros:

*   Fastest execution time
*   Simple and straightforward implementation

Cons:

*   May lead to unintended side effects due to mutable state
*   Can cause issues with concurrent execution or caching

**Approach 3: Object.assign()**

`Object.assign()` is used to merge two objects, adding new properties from the second object to the first. In this case, it's used to add a new property `num` to the accumulator object.

Pros:

*   Creates a new object with merged properties
*   Can be more predictable than mutation

Cons:

*   May be slower due to the creation of a new object reference
*   May not work correctly for nested objects or arrays

**Library: None**

There is no specific library used in this benchmark. The code only uses built-in JavaScript features and standard libraries.

**Special JS Feature/Syntax**

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

**Alternatives**

If you're interested in exploring alternative approaches, here are a few options:

*   **Using `Object.create()`**: Instead of creating a new object with the spread operator, you could use `Object.create()` to create an object with inherited properties.
*   **Using `Array.prototype.reduce()` with initial value as an object**: You could modify the accumulator type to be an object instead of a mutable variable, and use `reduce()` to merge properties.
*   **Using a library like Lodash's `merge()` function**: If you prefer a more functional programming approach, you could use a library like Lodash that provides a robust implementation of `merge()`.

Related benchmarks:

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

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

Created: 2 years ago by: Guest

Jump to the latest result

with spread operator

with mutation

with object assign

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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