Benchmark: JavaScript spread operator vs Object.assign vs only-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) { finalObject[key] = firstObject[key]; } } if (secondObject != null) { for (let key in secondObject) { 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: 6 months ago)

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

Browser/OS: Chrome 141 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Using the spread operator	33980480.0 Ops/sec
Using Object.assign	26552656.0 Ops/sec
Using For-In loop	64082452.0 Ops/sec
Using For-In loop with type checks	64490060.0 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 explanation of the provided benchmark.

**Benchmark Overview**

The benchmark measures the performance of three different approaches to merge objects without mutation:

1. Using the spread operator (`...`)
2. Using `Object.assign()`
3. Using a null-checked For-In loop

**Options Comparison**

Here's a brief comparison of the options:

* **Using the Spread Operator**: This approach uses the `...` operator to create a new object with the properties from both `firstObject` and `secondObject`. It's a concise and modern way to merge objects.
	+ Pros: Easy to read, efficient, and widely supported.
	+ Cons: May not work well with older browsers or versions of JavaScript that don't support the spread operator.
* **Using Object.assign()**: This approach uses the `Object.assign()` method to create a new object with the properties from both `firstObject` and `secondObject`. It's a standard way to merge objects in modern JavaScript.
	+ Pros: Widely supported, efficient, and works well even with older browsers or versions of JavaScript.
	+ Cons: Can be less readable than other approaches, especially when dealing with complex object structures.
* **Using Null-Checked For-In Loop**: This approach uses a null-checked For-In loop to iterate over the properties of both `firstObject` and `secondObject` and assign them to a new object. It's a more verbose way to merge objects but provides some additional safety checks.
	+ Pros: Provides additional safety checks (null checks), can be used in older browsers or versions of JavaScript that don't support spread operator or Object.assign().
	+ Cons: Can be less efficient, more verbose, and may not work well with complex object structures.

**Library and Special Features**

There are no explicit libraries mentioned in the benchmark. However, some features like `Object.assign()` rely on the ECMAScript standard, which is a set of standardized specifications for JavaScript.

The spread operator (`...`) was introduced in ECMAScript 2015 (ES6) and has since become a widely supported feature in modern browsers and versions of JavaScript.

**For-In Loop and Null Checks**

The For-In loop with null checks is a common pattern used to iterate over object properties in older browsers or versions of JavaScript that don't support more modern approaches like `Object.assign()` or the spread operator. The null check helps prevent errors when dealing with objects that may not have certain properties.

**Other Alternatives**

Some alternative approaches to merging objects without mutation include:

* Using `merge()` methods provided by libraries like Lodash or Ramda.
* Using `reduce()` method on an array of key-value pairs.
* Using a recursive function to merge objects.

However, these alternatives might be overkill for simple use cases and may introduce additional dependencies or complexity.

Related benchmarks:

JavaScript spread operator vs Object.assign vs only-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: 4 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>

Fastest: N/A

Slowest: N/A

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