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

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

For large objects, 1 value change only

Comparing performance of: Using Object.assign vs Using the spread operator 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: 4 months ago by: Guest

Jump to the latest result

Tests:

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 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 (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) diff = Object.fromEntries(diff) 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) diff = Object.fromEntries(diff) 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 Object.assign
Using the spread operator
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 one month ago):

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided JSON represents a JavaScript benchmark that compares the performance of three different approaches to merge two large objects:

1. `Object.assign()`: A built-in method that merges all own properties of one or more source objects into an object, which is then returned.
2. `Spread Operator (`): A syntax sugar for `Object.assign()` that uses the spread operator (`...`) to specify the source objects.
3. Filtered Spread Operator: A variation of the previous approach that filters out specific properties before merging.

**Approach 1: Object.assign()**

This is the simplest and most straightforward way to merge two objects. It works by iterating over each property in one object, checking if it exists in the other object, and if so, adding it to the result.

**Approach 2: Spread Operator (`)**

This approach uses the spread operator (`...`) to specify the source objects. The `Object.assign()` method is called internally with these source objects as arguments.

**Approach 3: Filtered Spread Operator**

This variation adds an additional layer of complexity by filtering out specific properties before merging. It uses the `filter()` method to create a new array of keys that should be included in the merged object, and then uses the spread operator (`...`) to merge only those properties.

**Performance Comparison**

The benchmark results show the performance of each approach on a Chrome 126 browser running on Linux. The measurements are reported in executions per second (EPS).

| Test Name | Executions Per Second |
| --- | --- |
| Using Object.assign | 1565.6466064453125 |
| Using the spread operator (`) | 3481.01171875 |
| Using the spread operator (`)** filtered | 5664.43896484375 |

The results indicate that:

* The Filtered Spread Operator approach performs better than `Object.assign()` by about 2.3x.
* The Spread Operator (`)` approach outperforms `Object.assign()` by about 2.25x.
* Both the Spread Operator (`)` and Filtered Spread Operator approaches perform significantly better than `Object.assign()`, with a combined lead of about 4.5x.

**Conclusion**

In general, the Spread Operator (`)` approach is likely to be the most efficient way to merge two objects, as it allows for more flexible and efficient iteration over the source properties. The Filtered Spread Operator variation adds some overhead due to the filtering step, but still performs better than `Object.assign()`.

Latest run results:

Run details: (Test run date: 4 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 Object.assign	1565.6 Ops/sec
Using the spread operator	3481.0 Ops/sec
Using Object.assign (known change)	7426.1 Ops/sec
Using the spread operator (known change)	6986.0 Ops/sec
Using Object.assign (filtered)	5664.4 Ops/sec
Using the spread operator (filter)	5495.7 Ops/sec

Related benchmarks:

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

For large objects, 1 value change only

Comparing performance of: Using Object.assign vs Using the spread operator 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: 4 months ago by: Guest

Jump to the latest result

Using Object.assign

Using the spread operator

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 one month ago):