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

with for of loop

9.8M/s

with mutation

9.7M/s

with for loop

8.3M/s

with spread operator

1.8M/s

with object assign

388K/s

View exact numbers

Test name	Executions per second
✓ with for of loop	9,808,419 Ops/sec
with mutation	9,694,777 Ops/sec
with for loop	8,310,622 Ops/sec
with spread operator	1,752,812 Ops/sec
with object assign	388,366 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.

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

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

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

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

Related benchmarks

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