Benchmark: spread vs mutation vs Object.assign for reduce callback vs for of loop vs for loop

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}) }, {})
with for of loop
const range = (from, to) => { const output = [] for(var x = from; x < to; x++){ output.push(x) } return output } const items = range(0, 10); let result = {}; for(let item of items) { result[item] = item; }
with for loop
const range = (from, to) => { const output = [] for(var x = from; x < to; x++){ output.push(x) } return output } const items = range(0, 10); let result = {}; for(let i = 0; i < items.length; i += 1) { result[items[i]] = items[i]; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
with spread operator
with mutation
with object assign
with for of loop
with for loop

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Browser/OS: Chrome 120 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
with spread operator	1752811.5 Ops/sec
with mutation	9694777.0 Ops/sec
with object assign	388366.2 Ops/sec
with for of loop	9808419.0 Ops/sec
with for loop	8310622.0 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 its test cases.

**Benchmark Definition**
The benchmark is defined as a JavaScript function `range` that generates an array of numbers from 0 to a specified number `to`. The function uses a for loop to iterate over the range and push each number into an output array.

**Test Cases**

1. **With Spread Operator**: In this test case, the spread operator (`...`) is used to create a new object with the current number as its key and value.
	* Pros: Easy to read and maintain, concise code.
	* Cons: May not be optimized for performance, can lead to unnecessary object creation.
2. **With Mutation**: In this test case, the original accumulator object (`acc`) is modified directly by assigning a new property with the current number as its key and value.
	* Pros: Fast and efficient, as it only modifies existing data.
	* Cons: May be harder to read and understand for some developers, as the mutation can affect the code's semantics.
3. **With Object Assign**: In this test case, the `Object.assign` method is used to create a new object with the current number as its key and value. This approach creates a new object, similar to the spread operator.
	* Pros: Similar benefits as the spread operator, but using a more explicit method.
	* Cons: May not be optimized for performance, can lead to unnecessary object creation.
4. **With For Of Loop**: In this test case, the for-of loop is used to iterate over the generated array and create a new object with each number as its key and value.
	* Pros: Easy to read and maintain, concise code.
	* Cons: May not be optimized for performance, can lead to unnecessary iteration.
5. **With For Loop**: In this test case, a traditional for loop is used to iterate over the range and create an object with each number as its key and value.
	* Pros: Easy to understand and maintain, as it's a familiar control structure.
	* Cons: May not be optimized for performance, can lead to unnecessary iteration.

**Library Used**: None of the test cases use any external libraries.

**Special JS Feature/Syntax**: The benchmark uses modern JavaScript features such as:

* Spread operator (`...`)
* Arrow functions (`=>`)
* Template literals (`\r\n`)

However, these features are not specific to the benchmark itself and can be used in other contexts without affecting their performance.

**Other Alternatives**: If you wanted to optimize this benchmark for performance, you could consider using:

* `Array.prototype.forEach()` instead of a traditional for loop
* `Object.create()` instead of creating an object with `...` or `Object.assign()`
* Using a more efficient data structure, such as a hash table or a map

Keep in mind that these optimizations may come at the cost of readability and maintainability.

Related benchmarks:

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

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

Created: 2 years ago by: Guest

Jump to the latest result

with spread operator

with mutation

with object assign

with for of loop

with for loop

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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