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
  }
}, {})

AخA
 
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
}, {})

 
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})
}, {})

 
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;
}

​x
 
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];
}

 
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

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

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: one year 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 6 months ago):

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

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.
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.
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.
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.
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.

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: one year ago by: Guest

Jump to the latest result