Benchmark: spread vs mutation vs Object.assign for reduce callback - range 0, 1000

Tests:

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

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

I'll provide an explanation of the provided benchmark.

**Benchmark Overview**

The benchmark measures the performance of three different approaches for modifying an object in JavaScript:

1. Using the spread operator (`...`).
2. Mutating the original object directly.
3. Using `Object.assign()` to create a new object and assign values to it.

**Options Compared**

The options being compared are:

* **Spread Operator**: Using the spread operator to add properties to an existing object (`{ ... }` syntax).
* **Mutation**: Directly modifying the original object by assigning values to its properties.
* **Object Assign**: Using `Object.assign()` to create a new object and assign values to it.

**Pros and Cons of Each Approach**

1. **Spread Operator**:
	* Pros: Convenient, readable, and efficient way to add properties to an existing object. It also helps prevent overwriting existing properties unintentionally.
	* Cons: Can be slower than mutation or `Object.assign()` due to the overhead of creating a new object.
2. **Mutation**:
	* Pros: Fastest approach as it modifies the original object directly without any overhead.
	* Cons: Can lead to unexpected behavior if not used carefully, and it can also cause issues with code readability and maintainability.
3. **Object Assign**:
	* Pros: Creates a new object and assigns values to it, which can be beneficial in cases where you want to avoid modifying the original object.
	* Cons: Requires creating an additional object, which can lead to higher memory usage and slower performance compared to mutation.

**Library Used**

There is no library used in this benchmark. The tests are written in vanilla JavaScript.

**Special JS Features/Syntax**

The benchmark uses a custom `range()` function that returns an array of numbers from 0 to the specified upper limit (`to`). This function is not a built-in JavaScript feature, but rather a simple utility function designed for the purposes of this benchmark.

Related benchmarks:

spread vs mutation vs Object.assign for reduce callback - range 0, 1000 (version: 0)

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

Created: 6 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

No previous run results

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