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

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

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 days ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

Browser/OS: Chrome 135 on Windows

View result in a separate tab

Test name	Executions per second
with spread operator	2217563.8 Ops/sec
with mutation	10999857.0 Ops/sec
with object assign	544825.1 Ops/sec

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

Let's dive into the world of JavaScript benchmarks!

Benchmark Overview

The provided JSON represents a benchmark test for comparing three approaches to updating an object in a reduce callback function:

Mutation: Directly modifying the accumulator object by assigning a new property directly.
Spread Operator: Using the spread operator ({...acc, [num]: num}) to create a new object with the updated property.
Object.assign: Using the Object.assign method to merge an object into the accumulator.

Options Compared

The benchmark tests these three approaches for updating an object in a reduce callback function, which is likely used in various scenarios like data aggregation or transformation. The test measures the performance differences between these approaches on different browsers and devices.

Pros and Cons of Each Approach:

Mutation: Simple and straightforward, but can be slower due to the direct modification of the accumulator object.
- Pros: Easy to understand and implement.
- Cons: May lead to unexpected side effects or pollute the accumulator object's namespace.
Spread Operator: Creates a new object with the updated property, which can lead to faster performance due to less overhead.
- Pros: More efficient than mutation, and avoids potential side effects.
- Cons: Can be less readable for those not familiar with the spread operator.
Object.assign: Merges an object into the accumulator, providing a more controlled way of updating properties.
- Pros: More explicit and predictable than mutation or the spread operator.
- Cons: May incur additional overhead due to the method call.

Library Used

None explicitly mentioned in the provided JSON. However, it's likely that the benchmark script uses built-in JavaScript features like reduce and Object.assign.

Special JS Feature/Syntax

The use of the spread operator ({...acc, [num]: num}) is a relatively recent feature introduced in ECMAScript 2018 (ES2018). It allows for concise object creation by spreading existing objects into new ones.

Alternative Approaches

Other approaches to updating an object in a reduce callback function might include:

Using a temporary object to store the updated properties and then merging it with the accumulator.
Recreating the entire accumulator object with each update, which would be less efficient due to increased memory allocation and garbage collection.

In summary, this benchmark test provides valuable insights into the performance differences between various approaches to updating an object in a reduce callback function. By understanding these pros and cons, developers can make informed decisions about the best approach for their specific use case.

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript benchmarks!

**Benchmark Overview**

The provided JSON represents a benchmark test for comparing three approaches to updating an object in a reduce callback function:

1. **Mutation**: Directly modifying the accumulator object by assigning a new property directly.
2. **Spread Operator**: Using the spread operator (`{...acc, [num]: num}`) to create a new object with the updated property.
3. **Object.assign**: Using the `Object.assign` method to merge an object into the accumulator.

**Options Compared**

**Pros and Cons of Each Approach:**

1. **Mutation**: Simple and straightforward, but can be slower due to the direct modification of the accumulator object.
	* Pros: Easy to understand and implement.
	* Cons: May lead to unexpected side effects or pollute the accumulator object's namespace.
2. **Spread Operator**: Creates a new object with the updated property, which can lead to faster performance due to less overhead.
	* Pros: More efficient than mutation, and avoids potential side effects.
	* Cons: Can be less readable for those not familiar with the spread operator.
3. **Object.assign**: Merges an object into the accumulator, providing a more controlled way of updating properties.
	* Pros: More explicit and predictable than mutation or the spread operator.
	* Cons: May incur additional overhead due to the method call.

**Library Used**

None explicitly mentioned in the provided JSON. However, it's likely that the benchmark script uses built-in JavaScript features like `reduce` and `Object.assign`.

**Special JS Feature/Syntax**

The use of the spread operator (`{...acc, [num]: num}`) is a relatively recent feature introduced in ECMAScript 2018 (ES2018). It allows for concise object creation by spreading existing objects into new ones.

**Alternative Approaches**

Other approaches to updating an object in a reduce callback function might include:

* Using a temporary object to store the updated properties and then merging it with the accumulator.
* Recreating the entire accumulator object with each update, which would be less efficient due to increased memory allocation and garbage collection.

Related benchmarks:

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