Benchmark: Spread operator vs mutation vs Object.assign with reduce

Script Preparation code:

var range = (from, to) => {
  const output = []
  for(var x = from; x < to; x++){
    output.push(x)
  }
  return output
}

Tests:

with spread operator
range(0, 10).reduce((acc, num) => { return { ...acc, [num]: num } }, {})
with mutation
range(0, 10).reduce((acc, num) => { acc[num] = num return acc }, {})
with object assign
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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36

Browser/OS: Chrome 129 on Mac OS X 10.15.7

View result in a separate tab

with mutation

6.2M/s

with spread operator

1.7M/s

with object assign

356K/s

View exact numbers

Test name	Executions per second
✓ with mutation	6,214,920 Ops/sec
with spread operator	1,662,796 Ops/sec
with object assign	355,568 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 benchmark and explain what is being tested.

**Benchmark Definition**

The benchmark measures the performance of three approaches to add an element to an object in a reduce function: using the spread operator (`{...acc, [num]: num}`), mutation (`acc[num] = num`), and `Object.assign`.

**Options Compared**

1. **Spread Operator**: This approach uses the spread operator (`{...obj, key: value}`) to add a new property to an object.
2. **Mutation**: This approach modifies the existing object by assigning a new value to an existing property (`acc[num] = num`).
3. **Object.assign**: This approach uses the `Object.assign()` method to merge two objects and update the existing one.

**Pros and Cons**

* **Spread Operator**:
	+ Pros: concise, readable, and efficient (since it creates a new object with the updated property without modifying the original object).
	+ Cons: may incur overhead due to the creation of a new object.
* **Mutation**:
	+ Pros: simple and efficient (no overhead from creating a new object), but may lead to unexpected behavior if not handled carefully.
	+ Cons: can be error-prone, especially in larger codebases with complex object structures.
* **Object.assign**:
	+ Pros: widely supported, flexible, and can handle merging multiple objects.
	+ Cons: can incur overhead due to the creation of a new object or copying properties from an existing object.

**Library and Purpose**

None explicitly mentioned in the benchmark definition. However, it's worth noting that `Object.assign()` is a built-in method in JavaScript and does not require any external libraries.

**Special JS Features/Syntax**

The benchmark uses the spread operator (`{...obj, key: value}`) and arrow functions (`(acc, num) => { ... }`). These features are part of modern JavaScript syntax and are widely supported across most browsers.

**Alternatives**

Other approaches to add an element to an object in a reduce function could include:

* Using `Array.prototype.push()` or `Array.prototype.splice()`: While not directly applicable to a reduce function, these methods can be used to append elements to an array, which can then be passed to the reduce function.
* Using a custom loop: A simple loop can be used to iterate over the range of numbers and update the object in each iteration.

Keep in mind that these alternatives may not provide the same level of performance or conciseness as the spread operator, mutation, or `Object.assign()` methods.

Spread operator vs mutation vs Object.assign with reduce (version: 0)

Check the performance inside a reduce.

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

Created: 5 years ago by: Guest

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

Spread operator vs mutation vs Object.assign with reduce (version: 0)

Check the performance inside a reduce.

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

Created: 5 years ago by: Guest

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

Related benchmarks

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