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: 3 months ago by: Guest

Jump 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

Autogenerated LLM Summary (model llama3.2:3b, generated 24 days 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.

Latest run results:

Run details: (Test run date: 3 months 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

Test name	Executions per second
Using the spread operator	2264.8 Ops/sec
Using Object.assign	2412.3 Ops/sec
Using Object.assign (known change)	6478.3 Ops/sec
Using the spread operator (known change)	6579.4 Ops/sec
Using Object.assign (filtered)	5364.5 Ops/sec
Using the spread operator (filter)	5213.0 Ops/sec

Related benchmarks:

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: 3 months ago by: Guest

Jump to the latest 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)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 24 days ago):