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

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: 6 days ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Using the spread operator	34184180.0 Ops/sec
Using Object.assign	11751202.0 Ops/sec
Not merging	6384504.5 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one month 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.

Related benchmarks:

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

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

Created: 4 years ago by: Guest

Jump to the latest result

Using the spread operator

Using Object.assign

Not merging

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