Benchmark: JavaScript spread operator vs Object.assign vs null-checked for-in loop performance

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);
Using For-In loop
const firstObject = { sampleData: 'Hello world' } const secondObject = { moreData: 'foo bar' } const finalObject = {} for (let key in firstObject) { finalObject[key] = firstObject[key]; } for (let key in secondObject) { finalObject[key] = secondObject[key]; }
Using For-In loop with type checks
const firstObject = { sampleData: 'Hello world' } const secondObject = { moreData: 'foo bar' } const finalObject = {} if (firstObject != null) { for (let key in firstObject) { if (Object.prototype.hasOwnProperty.call(firstObject, key)) { finalObject[key] = firstObject[key]; } } } if (secondObject != null) { for (let key in secondObject) { if (Object.prototype.hasOwnProperty.call(secondObject, 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
Using For-In loop
Using For-In loop with type checks

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/96.0.4664.110 Safari/537.36

Browser/OS: Chrome 96 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Using the spread operator	5106751.0 Ops/sec
Using Object.assign	10110171.0 Ops/sec
Using For-In loop	74083856.0 Ops/sec
Using For-In loop with type checks	5852321.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what is being tested.

**Benchmark Overview**

The benchmark compares the performance of three approaches to merge two objects into one, without mutating either object:

1. **Using the spread operator (`...`)**: This approach uses the spread operator to create a new object with the properties from both input objects.
2. **Using `Object.assign()`**: This approach uses the `Object.assign()` method to copy the properties of one object and assign them to another object.
3. **Using a null-checked `for-in` loop**: This approach uses a `for-in` loop to iterate over the properties of both input objects, and assigns the values to a new object only if the property is not null.

**Options Compared**

The three options are compared in terms of their execution speed and performance. The benchmark measures the number of executions per second for each option on different browsers and devices.

**Pros and Cons of Each Approach**

1. **Using the spread operator (`...`)**:
	* Pros: concise, easy to read, and maintainable; does not require iteration or conditional checks.
	* Cons: may have performance implications due to the creation of a new object.
2. **Using `Object.assign()`**:
	* Pros: widely supported, efficient for large objects, and can be optimized for performance.
	* Cons: requires additional method calls, which might incur overhead; may not work correctly with inherited properties.
3. **Using a null-checked `for-in` loop**:
	* Pros: can be more efficient than the spread operator or Object.assign() for very small objects; allows for fine-grained control over property assignments.
	* Cons: requires explicit iteration and conditional checks, which may lead to more code complexity.

**Library Used**

In this benchmark, `Object.assign()` is used, which is a standard method in JavaScript for copying properties from one object to another. The use of `Object.assign()` implies that the benchmark is running on modern browsers or environments that support this method.

**Special JS Feature/Syntax**

There are no special JS features or syntax mentioned in the benchmark definition, as it only involves standard JavaScript concepts and libraries.

**Alternatives**

If you want to explore alternative approaches for merging objects without mutation, some other options could be:

* Using `Object.create()` with an object literal
* Using a library like Lodash's `merge()` function
* Implementing a custom merge function using recursion or iteration

Keep in mind that the choice of approach depends on your specific use case and requirements. The benchmark results can provide insights into which approach is most efficient for your particular scenario.

Related benchmarks:

JavaScript spread operator vs Object.assign vs null-checked for-in loop performance (version: 0)

Measure the fastest way to merge objects, without mutation.

Comparing performance of: Using the spread operator vs Using Object.assign vs Using For-In loop vs Using For-In loop with type checks

Created: 3 years ago by: Guest

Jump to the latest result

Using the spread operator

Using Object.assign

Using For-In loop

Using For-In loop with type checks

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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