Benchmark: spread vs mutation vs Object.assign for reduce callback (30)

Tests:

with spread operator

const range = (from, to) => {
  const output = []
  for(var x = from; x < to; x++){
    output.push(x)
  }
  return output
}
range(0, 30).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, 30).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, 30).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, 30).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, 30).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, 30).reduce((acc, num) => {  return Object.assign(acc, {[num]: num})}, {})

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

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 84 on Mac OS X 10.15.3

View result in a separate tab

Test name	Executions per second
with spread operator	264922.2 Ops/sec
with mutation	1186626.2 Ops/sec
with object assign	43801.5 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

Let's dive into the benchmark and explain what's being tested.

The provided benchmark defines three test cases:

Spread Operator ("with spread operator"): This test case creates an array output using a function range, which generates numbers from 0 to 30. Then, it uses the spread operator (...) to create a new object with the numbers as properties and values.
Mutation ("with mutation"): Similar to the first test case, this one creates an array output using the same function range, but instead of creating a new object, it mutates the existing accumulator object acc by assigning each number as a property with its value.
Object.assign ("with object assign"): This test case uses the Object.assign() method to create a new object with the numbers as properties and values.

The benchmark is testing which approach is faster: using the spread operator, mutating the accumulator object, or using Object.assign().

Now, let's discuss the pros and cons of each approach:

Spread Operator: This approach creates a new object every time it's called. While this can be efficient for small objects, it can lead to memory overhead for large datasets.
Mutation: This approach modifies an existing accumulator object, which can be less memory-efficient than creating a new object. However, it avoids the overhead of Object.assign() and might be faster in terms of iteration.
Object.assign(): This approach creates a new object every time it's called, similar to the spread operator. It's generally safe but can lead to memory issues for large datasets.

Other Considerations:

The benchmark uses JavaScript engines like Chrome 84 on Mac OS X 10.15.3.
The test cases use relatively small arrays (numbers from 0 to 30), which might not be representative of real-world scenarios where larger datasets are involved.
The range function generates numbers using a simple loop, which is straightforward but not particularly optimized.

Library and Special JS Features:

There's no explicit library used in these test cases. However, the spread operator is a built-in JavaScript feature introduced in ECMAScript 2018.

Benchmark Preparation Code:

The provided JSON does not contain any script preparation code. The benchmark definition itself is enough to execute the tests.

LLMs can make mistakes. Check important info.

Let's dive into the benchmark and explain what's being tested.

The provided benchmark defines three test cases:

1. **Spread Operator** (`"with spread operator"`): This test case creates an array `output` using a function `range`, which generates numbers from 0 to 30. Then, it uses the spread operator (`...`) to create a new object with the numbers as properties and values.
2. **Mutation** (`"with mutation"`): Similar to the first test case, this one creates an array `output` using the same function `range`, but instead of creating a new object, it mutates the existing accumulator object `acc` by assigning each number as a property with its value.
3. **Object.assign** (`"with object assign"`): This test case uses the `Object.assign()` method to create a new object with the numbers as properties and values.

The benchmark is testing which approach is faster: using the spread operator, mutating the accumulator object, or using `Object.assign()`.

Now, let's discuss the pros and cons of each approach:

* **Spread Operator**: This approach creates a new object every time it's called. While this can be efficient for small objects, it can lead to memory overhead for large datasets.
* **Mutation**: This approach modifies an existing accumulator object, which can be less memory-efficient than creating a new object. However, it avoids the overhead of `Object.assign()` and might be faster in terms of iteration.
* **Object.assign()**: This approach creates a new object every time it's called, similar to the spread operator. It's generally safe but can lead to memory issues for large datasets.

**Other Considerations:**

* The benchmark uses JavaScript engines like Chrome 84 on Mac OS X 10.15.3.
* The test cases use relatively small arrays (numbers from 0 to 30), which might not be representative of real-world scenarios where larger datasets are involved.
* The `range` function generates numbers using a simple loop, which is straightforward but not particularly optimized.

**Library and Special JS Features:**

There's no explicit library used in these test cases. However, the spread operator is a built-in JavaScript feature introduced in ECMAScript 2018.

**Benchmark Preparation Code:**

The provided JSON does not contain any script preparation code. The benchmark definition itself is enough to execute the tests.

Related benchmarks:

spread vs mutation vs Object.assign for reduce callback (30) (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