Benchmark: JavaScript spread operator vs Object.assign performance, large objects v2

JavaScript spread operator vs Object.assign performance, large objects v2 (version: 0)

For large objects, 1 value change only

Comparing performance of: `Using the spread operator vs Using Object.assign vs Using Object.assign (known change) vs Using the spread operator (known change) vs Using Object.assign (filtered) vs Using the spread operator (filter)`

Created: 2 years ago by: Guest

Go to the latest result

Tests:

Using the spread operator
const firstObject = {} const secondObject = {} for(let i = 1; i < 1000; i++) firstObject[i] = Math.random(); for(let i = 1; i < 1000; i++) secondObject[i] = firstObject[i]; let rnd = Math.floor(Math.random() * 1000); secondObject[rnd] = Math.random(); const finalObject = { ...firstObject, ...secondObject }; console.log("first", firstObject) console.log("second", secondObject) console.log("final", finalObject)
Using Object.assign
const firstObject = {} const secondObject = {} for(let i = 1; i < 1000; i++) firstObject[i] = Math.random(); for(let i = 1; i < 1000; i++) secondObject[i] = firstObject[i]; let rnd = Math.floor(Math.random() * 1000); secondObject[rnd] = Math.random(); const finalObject = Object.assign(firstObject, secondObject); console.log("first", firstObject) console.log("second", secondObject) console.log("final", finalObject)
Using Object.assign (known change)
const firstObject = {} const secondObject = {} for(let i = 1; i < 1000; i++) firstObject[i] = Math.random(); for(let i = 1; i < 1000; i++) secondObject[i] = firstObject[i]; let rnd = Math.floor(Math.random() * 1000); secondObject[rnd] = Math.random(); let diff = {} diff[rnd] = secondObject[rnd]; const finalObject = Object.assign(firstObject, diff); console.log("first", firstObject) console.log("second", secondObject) console.log("final", finalObject)
Using the spread operator (known change)
const firstObject = {} const secondObject = {} for(let i = 1; i < 1000; i++) firstObject[i] = Math.random(); for(let i = 1; i < 1000; i++) secondObject[i] = firstObject[i]; let rnd = Math.floor(Math.random() * 1000); secondObject[rnd] = Math.random(); let diff = {} diff[rnd] = secondObject[rnd]; const finalObject = { ...firstObject, ...diff }; console.log("first", firstObject) console.log("second", secondObject) console.log("final", finalObject)
Using Object.assign (filtered)
const firstObject = {} const secondObject = {} for(let i = 1; i < 1000; i++) firstObject[i] = Math.random(); for(let i = 1; i < 1000; i++) secondObject[i] = firstObject[i]; let rnd = Math.floor(Math.random() * 1000); secondObject[rnd] = Math.random(); let diff = Object.entries(secondObject).filter((value, key) => key == rnd) const finalObject = Object.assign(firstObject, diff); console.log("first", firstObject) console.log("second", secondObject) console.log("final", finalObject)
Using the spread operator (filter)
const firstObject = {} const secondObject = {} for(let i = 1; i < 1000; i++) firstObject[i] = Math.random(); for(let i = 1; i < 1000; i++) secondObject[i] = firstObject[i]; let rnd = Math.floor(Math.random() * 1000); secondObject[rnd] = Math.random(); let diff = Object.entries(secondObject).filter((value, key) => key == rnd) const finalObject = { ...firstObject, ...diff }; console.log("first", firstObject) console.log("second", secondObject) console.log("final", finalObject)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Using the spread operator
Using Object.assign
Using Object.assign (known change)
Using the spread operator (known change)
Using Object.assign (filtered)
Using the spread operator (filter)

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Browser/OS: Chrome 126 on Linux

View result in a separate tab

Using the spread operator (known change)

7K/s

Using Object.assign (known change)

6K/s

Using Object.assign (filtered)

5K/s

Using the spread operator (filter)

5K/s

Using Object.assign

2K/s

Using the spread operator

2K/s

View exact numbers

Test name	Executions per second
✓ Using the spread operator (known change)	6,579 Ops/sec
Using Object.assign (known change)	6,478 Ops/sec
Using Object.assign (filtered)	5,364 Ops/sec
Using the spread operator (filter)	5,213 Ops/sec
Using Object.assign	2,412 Ops/sec
Using the spread operator	2,265 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down what's being tested in this benchmark:

**Benchmark Context**

The benchmark is comparing the performance of three ways to create a new object by merging two existing objects:

1. Using the spread operator (`...`)
2. Using `Object.assign()`
3. Using `Object.assign()` with a filtered version of the target object

**Benchmark Scenarios**

The benchmark is run on different devices and browsers, including Chrome 126 on Linux desktops.

**Performance Metrics**

The performance metrics measured are:

* `ExecutionsPerSecond`: The number of executions per second for each test case.

**Test Cases**

There are six test cases in total:

1. **Using the spread operator (known change)**: This is the first implementation that creates a new object using the spread operator.
2. **Using Object.assign() (known change)**: This is the second implementation that uses `Object.assign()` to create a new object.
3. **Using Object.assign() with filtered version**: This is the third implementation that uses `Object.assign()` but only includes specific properties from the target object in the merge process.
4. **Using the spread operator (filter)**: This is similar to the first test case, but uses a filtered version of the source object.
5. **Using Object.assign()**: This is a basic implementation that creates a new object using `Object.assign()`.
6. **Using the spread operator**: This is another basic implementation that creates a new object using the spread operator.

**Results**

The benchmark results show the performance of each test case across different devices and browsers. The results indicate that:

* Using the spread operator with a filtered version of the source object (Test Case 4) performs well, with high `ExecutionsPerSecond` values.
* Using the spread operator without filtering (Test Cases 1 and 2) perform similarly to each other, but slightly worse than Test Case 4.
* Using `Object.assign()` with a filtered version (Test Case 3) performs poorly, with low `ExecutionsPerSecond` values.
* Basic implementations using `Object.assign()` or the spread operator (Test Cases 5 and 6) perform similarly to each other.

Overall, the benchmark suggests that using the spread operator with filtering is the most efficient way to create a new object by merging two existing objects.