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

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)

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year 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 one year ago):

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: one year 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)

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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