Benchmark: Spread vs Object.assign vs Object.keys

Tests:

Using the spread operator
const firstObject = { sampleData: 'Hello world',sampleData2: 'Hello world',sampleData3: 'Hello world' } const secondObject = { moreData: 'foo bar' } const finalObject = { ...firstObject, ...secondObject };
Using Object.assign
const firstObject = { sampleData: 'Hello world',sampleData2: 'Hello world',sampleData3: 'Hello world' } const secondObject = { moreData: 'foo bar' } const finalObject = Object.assign(firstObject, secondObject);
Not merging
const firstObject = { sampleData: 'Hello world',sampleData2: 'Hello world',sampleData3: 'Hello world' } const secondObject = { moreData: 'foo bar' } Object.keys(firstObject).map(key => {firstObject[key] = firstObject[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: 2 years ago)

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

Browser/OS: Chrome 120 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Using the spread operator	33656164.0 Ops/sec
Using Object.assign	12721795.0 Ops/sec
Not merging	8828485.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark measures the performance of three different approaches for object merging in JavaScript: using the spread operator, `Object.assign`, and not merging at all.

**Options Compared**

1. **Spread Operator**: The spread operator (`...`) is used to create a new object by copying the properties of an existing object.
2. **`Object.assign()`**: This method takes two or more objects as arguments and returns a new object with the properties merged from each source object.
3. **Not Merging**: In this approach, no merging is done, resulting in two separate objects.

**Pros and Cons**

1. **Spread Operator**:
	* Pros: Concise syntax, readable code, and efficient execution (since it only creates a new object with references to the original properties).
	* Cons: May have performance implications if dealing with large objects or complex data structures.
2. **`Object.assign()`**:
	* Pros: Wide browser support, well-established API, and can handle nested objects.
	* Cons: Can be slower than the spread operator for simple object merges, and its usage is not as concise.
3. **Not Merging**:
	* Pros: Simple syntax, no potential performance implications.
	* Cons: Inefficient in terms of memory usage (two separate objects are created), which can lead to performance issues when dealing with large data sets.

**Library and Special JS Feature**

There are no libraries used in this benchmark. However, JavaScript features like the spread operator (`...`) were introduced in ECMAScript 2015 (ES6) to improve code readability and conciseness.

**Other Considerations**

* The benchmark only measures the performance of object merging for two objects with a simple structure.
* Real-world applications often involve more complex data structures, such as arrays or nested objects, which may affect the performance differences between these approaches.
* Other factors like garbage collection, caching, and browser-specific optimizations can also impact the results.

**Alternatives**

If you need to merge objects in JavaScript but don't have access to modern browsers that support ES6 features, you can use other methods, such as:

1. Using `Object.assign()` with a loop: Iterate over the properties of one object and assign them to another using `Object.assign()`.
2. Using a library like Lodash's `merge` function.

However, keep in mind that these alternatives may have different performance characteristics compared to the spread operator or `Object.assign()` methods used in this benchmark.

Related benchmarks:

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

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

Created: 2 years ago by: Guest

Jump to the latest result

Using the spread operator

Using Object.assign

Not merging

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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