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: 10 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)

​x
 
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)

 
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)

 
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)

 
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)

 
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)

 
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

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
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

Latest run results:

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

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

Overview of the Benchmark

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

Object.assign(): A built-in method that merges all own properties of one or more source objects into an object, which is then returned.
Spread Operator (): A syntax sugar for Object.assign() that uses the spread operator (...) to specify the source objects.
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().

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()**

**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()`.

Related benchmarks: