Benchmark: Spread vs Object.assign vs Object.keys with forEach

Tests:

Using the spread operator
const firstObject = { sampleData: 'Hello world' } const secondObject = { moreData: 'foo bar' } const finalObject = { ...firstObject, ...secondObject };
Using Object.assign
const firstObject = { sampleData: 'Hello world' } const secondObject = { moreData: 'foo bar' } const finalObject = Object.assign(firstObject, secondObject);
Not merging
const firstObject = { sampleData: 'Hello world' } const secondObject = { moreData: 'foo bar' } const finalObject = {} Object.keys(firstObject).forEach(key => {finalObject[key] = firstObject[key] }) Object.keys(secondObject).forEach(key => {finalObject[key] = secondObject[key] })

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

Using the spread operator

35.9M/s

Using Object.assign

12.8M/s

Not merging

6.7M/s

Fastest: Using the spread operator (5.3x faster)

View exact numbers

✓ Using the spread operator: 35,875,352 ops/sec
• Using Object.assign: 12,840,629 ops/sec
• Not merging: 6,709,864 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Using the spread operator
Using Object.assign
Not merging

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.3 Safari/605.1.15

Browser/OS: Safari 18 on Mac OS X 10.15.7

View result in a separate tab

Not merging

13.1M/s

Using Object.assign

12.4M/s

Using the spread operator

9.5M/s

View exact numbers

Test name	Executions per second
✓ Not merging	13,097,471 Ops/sec
Using Object.assign	12,372,391 Ops/sec
Using the spread operator	9,493,565 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark.

**Benchmark Description**

The benchmark tests three different approaches for creating a new object by combining two existing objects: using the spread operator, `Object.assign`, and not merging (i.e., using `forEach` to iterate over the keys and values of the source objects).

**Options Compared**

1. **Using the spread operator**: This approach uses the syntax `{...obj1, ...obj2}` to create a new object with the properties from both `obj1` and `obj2`. The resulting object has all the properties from both sources.
	* Pros: Efficient, concise, and easy to read.
	* Cons: Only supported in modern browsers (ECMAScript 2018+), may not work in older browsers.
2. **Using `Object.assign`**: This approach uses the `Object.assign()` method to create a new object with the properties from both `obj1` and `obj2`. The resulting object has all the properties from both sources, but the order of the properties is preserved.
	* Pros: Widely supported in modern browsers (ECMAScript 5+), works in older browsers.
	* Cons: Can be slower than the spread operator due to the method call, and may not work as expected if one or both objects are arrays.
3. **Not merging**: This approach uses `forEach` to iterate over the keys of `obj1` and assigns each property from `obj1` to the new object, followed by iterating over the keys of `obj2` and assigning each property from `obj2`. The resulting object has only the properties from both sources.
	* Pros: Works in all browsers, no method call overhead.
	* Cons: Less efficient than using the spread operator or `Object.assign`, requires more code.

**Library**

None of these approaches rely on any external libraries. They are built-in JavaScript features or syntax.

**Special JS Feature/Syntax**

The benchmark uses the spread operator feature (`{...obj1, ...obj2}`) and the `forEach` method to iterate over arrays (not just objects). The `Object.assign()` method is also a widely used JavaScript standard library function.

**Other Alternatives**

While not explicitly mentioned in the benchmark, other alternatives for creating new objects by combining two existing objects include:

* Using `Object.create()` with `Object.prototype.hasOwnProperty.call()`
* Using a library like Lodash's `merge()` or `pick()`
* Using a functional programming approach with `reduce()` and an accumulator object

However, these alternatives are not relevant to the specific benchmark being discussed.

Spread vs Object.assign vs Object.keys with forEach (version: 0) Benchmark.js

Comparing performance of: `Using the spread operator vs Using Object.assign vs Not merging`

Created: 6 years ago by: Guest

Go to the latest result

Using the spread operator

Using Object.assign

Not merging

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Spread vs Object.assign vs Object.keys with forEach (version: 0) Benchmark.js

Comparing performance of: Using the spread operator vs Using Object.assign vs Not merging

Created: 6 years ago by: Guest

Go to the latest result

Using the spread operator

Using Object.assign

Not merging

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `Using the spread operator vs Using Object.assign vs Not merging`