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

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)

​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 = {    ...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)

 
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)

 
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)

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 the spread operator
Using Object.assign
Using Object.assign (known change)
Using the spread operator (known change)

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 the spread operator	2243.0 Ops/sec
Using Object.assign	3514.5 Ops/sec
Using Object.assign (known change)	7689.6 Ops/sec
Using the spread operator (known change)	7257.2 Ops/sec

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

Benchmark Overview

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks. The provided benchmark measures the performance of two approaches: using the spread operator (...) to merge objects and using Object.assign() to merge objects.

Test Cases

There are four test cases:

Using the Spread Operator (known change): This test case creates a large object with 1000 properties, each initialized with a random value. It then modifies one property of this object by assigning a new value. The benchmark measures the performance of using the spread operator (...) to merge the original object with an object that has only the modified property set.
Using Object.assign (known change): This test case is similar to the previous one, but it uses Object.assign() instead of the spread operator. It also includes a known change in the final object to make it harder for the browser to optimize.
Using Object.assign: This test case creates a large object with 1000 properties, each initialized with a random value. It then modifies one property of this object by assigning a new value. The benchmark measures the performance of using Object.assign() to merge the original object with an object that has only the modified property set.
Using the Spread Operator (unknown change): This test case is similar to the first one, but it doesn't include a known change in the final object.

Options Compared

The benchmark compares two options:

Using the spread operator (...) to merge objects
Using Object.assign() to merge objects

Pros and Cons

Using the Spread Operator (known change):
- Pros: More concise and readable code, can be faster for large objects due to tree shaking.
- Cons: May not be optimized by browsers, can lead to performance issues if not used correctly.
Using Object.assign (known change):
- Pros: Can be more efficient than the spread operator in certain scenarios, may be optimized by browsers.
- Cons: More verbose code, may lead to security issues if not used correctly.
Using Object.assign:
- Pros: Can be more efficient and secure than the spread operator, may be optimized by browsers.
- Cons: Less concise and readable code, may lead to performance issues if not used correctly.

Libraries and Special JS Features

There are no libraries or special JS features mentioned in the benchmark. However, it's worth noting that Object.assign() is a built-in JavaScript method, so it doesn't require any external libraries.

Other Alternatives

If you need to merge objects, there are other alternatives besides using the spread operator and Object.assign(). Some options include:

Using a library like Lodash or Ramda, which provide more functional programming features.
Using a custom implementation of object merging, such as using a loop or recursion.

It's worth noting that the choice of approach depends on the specific use case and performance requirements. In general, using the spread operator is a good choice when working with large objects and modern browsers are optimized for it. However, Object.assign() may still be a better option in certain scenarios, such as when working with older browsers or when security is a concern.

LLMs can make mistakes. Check important info.

**Benchmark Overview**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks. The provided benchmark measures the performance of two approaches: using the spread operator (`...`) to merge objects and using `Object.assign()` to merge objects.

**Test Cases**

There are four test cases:

1. **Using the Spread Operator (known change)**: This test case creates a large object with 1000 properties, each initialized with a random value. It then modifies one property of this object by assigning a new value. The benchmark measures the performance of using the spread operator (`...`) to merge the original object with an object that has only the modified property set.
2. **Using Object.assign (known change)**: This test case is similar to the previous one, but it uses `Object.assign()` instead of the spread operator. It also includes a known change in the final object to make it harder for the browser to optimize.
3. **Using Object.assign**: This test case creates a large object with 1000 properties, each initialized with a random value. It then modifies one property of this object by assigning a new value. The benchmark measures the performance of using `Object.assign()` to merge the original object with an object that has only the modified property set.
4. **Using the Spread Operator (unknown change)**: This test case is similar to the first one, but it doesn't include a known change in the final object.

**Options Compared**

The benchmark compares two options:

1. Using the spread operator (`...`) to merge objects
2. Using `Object.assign()` to merge objects

**Pros and Cons**

* **Using the Spread Operator (known change)**:
	+ Pros: More concise and readable code, can be faster for large objects due to tree shaking.
	+ Cons: May not be optimized by browsers, can lead to performance issues if not used correctly.
* **Using Object.assign (known change)**:
	+ Pros: Can be more efficient than the spread operator in certain scenarios, may be optimized by browsers.
	+ Cons: More verbose code, may lead to security issues if not used correctly.
* **Using Object.assign**:
	+ Pros: Can be more efficient and secure than the spread operator, may be optimized by browsers.
	+ Cons: Less concise and readable code, may lead to performance issues if not used correctly.

**Libraries and Special JS Features**

There are no libraries or special JS features mentioned in the benchmark. However, it's worth noting that `Object.assign()` is a built-in JavaScript method, so it doesn't require any external libraries.

**Other Alternatives**

If you need to merge objects, there are other alternatives besides using the spread operator and `Object.assign()`. Some options include:

* Using a library like Lodash or Ramda, which provide more functional programming features.
* Using a custom implementation of object merging, such as using a loop or recursion.

It's worth noting that the choice of approach depends on the specific use case and performance requirements. In general, using the spread operator is a good choice when working with large objects and modern browsers are optimized for it. However, `Object.assign()` may still be a better option in certain scenarios, such as when working with older browsers or when security is a concern.

Related benchmarks:

JavaScript spread operator vs Object.assign performance, large objects (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)

Created: 10 months ago by: Guest

Jump to the latest result