Benchmark: spread vs mutation vs Object.assign for reduce

Tests:

with spread operator

const range = (from, to) => {
  const output = []
  for(var x = from; x < to; x++){
    output.push(x)
  }
  return output
}
range(0, 10000).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, 10000).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, 10000).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, 10000).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, 10000).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, 10000).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: 2 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/111.0

Browser/OS: Firefox 111 on Windows

View result in a separate tab

Test name	Executions per second
with spread operator	0.2 Ops/sec
with mutation	3846.2 Ops/sec
with object assign	155.8 Ops/sec

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

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

Benchmark Overview

The benchmark compares the performance of three approaches for reducing an object in JavaScript:

Mutation: Directly modifying the original object by assigning a new property to it.
Object Assign: Using the Object.assign() method to merge two objects, where one of them is the original object and the other is an object with a single property.
Spread Operator: Using the spread operator ({...}) to create a new object that includes all the properties of the original object.

Options Compared

The benchmark compares these three approaches because they have different performance characteristics:

Mutation has high overhead due to the creation and assignment of a new property, which can lead to slower execution.
Object Assign is generally faster than mutation but may still incur some overhead due to the function call and object merging process.
Spread Operator is typically the fastest approach because it creates a shallow copy of the original object using a single operation.

Pros and Cons

Here are the pros and cons of each approach:

Mutation: Pros: simple and efficient. Cons: can be slower due to property creation and assignment overhead.
Object Assign: Pros: generally faster than mutation but may incur some overhead due to function call and object merging. Cons: less efficient than spread operator.
Spread Operator: Pros: typically the fastest approach due to shallow copy creation using a single operation. Cons: may require more memory for the new object.

Library and Special JS Feature

The benchmark uses none of a library, but it does use the Object.assign() method, which is a built-in JavaScript function.

Special JS Feature

There are no special JavaScript features used in this benchmark. The code relies on standard JavaScript syntax and semantics.

Other Alternatives

If you were to rewrite this benchmark, you could consider using alternative approaches:

Destructuring: You could use destructuring assignment to create a new object with only the desired properties.
Object Literal: You could use an object literal to define the initial state of the object and then add new properties to it.
Array Methods: You could use array methods like reduce() or forEach() to iterate over the range and create a new object.

Keep in mind that these alternatives might have different performance characteristics compared to the original benchmark.

LLMs can make mistakes. Check important info.

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

**Benchmark Overview**

The benchmark compares the performance of three approaches for reducing an object in JavaScript:

1. **Mutation**: Directly modifying the original object by assigning a new property to it.
2. **Object Assign**: Using the `Object.assign()` method to merge two objects, where one of them is the original object and the other is an object with a single property.
3. **Spread Operator**: Using the spread operator (`{...}`) to create a new object that includes all the properties of the original object.

**Options Compared**

The benchmark compares these three approaches because they have different performance characteristics:

* Mutation has high overhead due to the creation and assignment of a new property, which can lead to slower execution.
* Object Assign is generally faster than mutation but may still incur some overhead due to the function call and object merging process.
* Spread Operator is typically the fastest approach because it creates a shallow copy of the original object using a single operation.

**Pros and Cons**

Here are the pros and cons of each approach:

* **Mutation**: Pros: simple and efficient. Cons: can be slower due to property creation and assignment overhead.
* **Object Assign**: Pros: generally faster than mutation but may incur some overhead due to function call and object merging. Cons: less efficient than spread operator.
* **Spread Operator**: Pros: typically the fastest approach due to shallow copy creation using a single operation. Cons: may require more memory for the new object.

**Library and Special JS Feature**

The benchmark uses none of a library, but it does use the `Object.assign()` method, which is a built-in JavaScript function.

**Special JS Feature**

There are no special JavaScript features used in this benchmark. The code relies on standard JavaScript syntax and semantics.

**Other Alternatives**

If you were to rewrite this benchmark, you could consider using alternative approaches:

* **Destructuring**: You could use destructuring assignment to create a new object with only the desired properties.
* **Object Literal**: You could use an object literal to define the initial state of the object and then add new properties to it.
* **Array Methods**: You could use array methods like `reduce()` or `forEach()` to iterate over the range and create a new object.

Keep in mind that these alternatives might have different performance characteristics compared to the original benchmark.

Related benchmarks:

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

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

Created: 2 years ago by: Guest

Jump to the latest result