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 };
AخA

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

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

​x
 
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

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

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: 3 years ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:94.0) Gecko/20100101 Firefox/94.0

Browser/OS: Firefox 94 on Linux

View result in a separate tab

Test name	Executions per second
Using the spread operator	3306413.2 Ops/sec
Using Object.assign	4934191.0 Ops/sec
Using For-In loop	9874058.0 Ops/sec
Using For-In loop with type checks	9721798.0 Ops/sec

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

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:

Using the spread operator (...)
Using Object.assign()
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.

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: 3 years ago by: Guest

Jump to the latest result

Using the spread operator

Using Object.assign