Benchmark: spread vs mutation vs Object.assign for reduce callback - range 0, 1000

Tests:

with spread operator

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

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

Browser/OS: Chrome 74 on Windows

View result in a separate tab

Test name	Executions per second
with spread operator	1603.2 Ops/sec
with mutation	43402.7 Ops/sec
with object assign	401.7 Ops/sec

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

I'll provide an explanation of the provided benchmark.

Benchmark Overview

The benchmark measures the performance of three different approaches for modifying an object in JavaScript:

Using the spread operator (...).
Mutating the original object directly.
Using Object.assign() to create a new object and assign values to it.

Options Compared

The options being compared are:

Spread Operator: Using the spread operator to add properties to an existing object ({ ... } syntax).
Mutation: Directly modifying the original object by assigning values to its properties.
Object Assign: Using Object.assign() to create a new object and assign values to it.

Pros and Cons of Each Approach

Spread Operator:
- Pros: Convenient, readable, and efficient way to add properties to an existing object. It also helps prevent overwriting existing properties unintentionally.
- Cons: Can be slower than mutation or Object.assign() due to the overhead of creating a new object.
Mutation:
- Pros: Fastest approach as it modifies the original object directly without any overhead.
- Cons: Can lead to unexpected behavior if not used carefully, and it can also cause issues with code readability and maintainability.
Object Assign:
- Pros: Creates a new object and assigns values to it, which can be beneficial in cases where you want to avoid modifying the original object.
- Cons: Requires creating an additional object, which can lead to higher memory usage and slower performance compared to mutation.

Library Used

There is no library used in this benchmark. The tests are written in vanilla JavaScript.

Special JS Features/Syntax

The benchmark uses a custom range() function that returns an array of numbers from 0 to the specified upper limit (to). This function is not a built-in JavaScript feature, but rather a simple utility function designed for the purposes of this benchmark.

LLMs can make mistakes. Check important info.

I'll provide an explanation of the provided benchmark.

**Benchmark Overview**

The benchmark measures the performance of three different approaches for modifying an object in JavaScript:

1. Using the spread operator (`...`).
2. Mutating the original object directly.
3. Using `Object.assign()` to create a new object and assign values to it.

**Options Compared**

The options being compared are:

* **Spread Operator**: Using the spread operator to add properties to an existing object (`{ ... }` syntax).
* **Mutation**: Directly modifying the original object by assigning values to its properties.
* **Object Assign**: Using `Object.assign()` to create a new object and assign values to it.

**Pros and Cons of Each Approach**

1. **Spread Operator**:
	* Pros: Convenient, readable, and efficient way to add properties to an existing object. It also helps prevent overwriting existing properties unintentionally.
	* Cons: Can be slower than mutation or `Object.assign()` due to the overhead of creating a new object.
2. **Mutation**:
	* Pros: Fastest approach as it modifies the original object directly without any overhead.
	* Cons: Can lead to unexpected behavior if not used carefully, and it can also cause issues with code readability and maintainability.
3. **Object Assign**:
	* Pros: Creates a new object and assigns values to it, which can be beneficial in cases where you want to avoid modifying the original object.
	* Cons: Requires creating an additional object, which can lead to higher memory usage and slower performance compared to mutation.

**Library Used**

There is no library used in this benchmark. The tests are written in vanilla JavaScript.

**Special JS Features/Syntax**

The benchmark uses a custom `range()` function that returns an array of numbers from 0 to the specified upper limit (`to`). This function is not a built-in JavaScript feature, but rather a simple utility function designed for the purposes of this benchmark.

Related benchmarks:

spread vs mutation vs Object.assign for reduce callback - range 0, 1000 (version: 0)

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

Created: 5 years ago by: Guest

Jump to the latest result