Benchmark: JavaScript spread operator vs Object.assign vs type-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 && typeof firstObject === 'object') { for (let key in firstObject) { if (Object.prototype.hasOwnProperty.call(firstObject, key)) { finalObject[key] = firstObject[key]; } } } if (secondObject != null && typeof secondObject === 'object') { 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: 3 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:94.0) Gecko/20100101 Firefox/94.0

Browser/OS: Firefox 94 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
Using the spread operator	7086809.5 Ops/sec
Using Object.assign	10193872.0 Ops/sec
Using For-In loop	21776542.0 Ops/sec
Using For-In loop with type checks	8444607.0 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down what's being tested and compared in the provided benchmark.

**Benchmark Overview**

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

1. Using the spread operator (`...`)
2. Using `Object.assign()`
3. Using a traditional `for-in` loop with type checks

**Library: Object.assign()**

`Object.assign()` is a method on the global `Object` object that allows you to copy properties from one or more source objects to a target object. It's a convenient way to merge objects without mutation.

**Pros and Cons of Object.assign():**

Pros:

* Easy to use
* Fast performance

Cons:

* Not optimized for objects with many properties (it uses `JSON.parse()` to serialize the target object)
* Can be slower than other approaches if the source object is large

**Using the Spread Operator (`...`)**

The spread operator (`...`) was introduced in ES6 and allows you to expand an object into a new object, preserving all its properties.

**Pros and Cons of Using the Spread Operator:**

Pros:

* Fast performance
* Preserves property names and values
* Can be more readable than traditional `for-in` loops

Cons:

* Requires modern JavaScript versions (ES6+)
* Can be slower than other approaches if the source object is very large

**Traditional For-In Loop with Type Checks**

This approach uses a traditional `for-in` loop to iterate over the properties of the first object and then checks if each property exists in the second object using `Object.prototype.hasOwnProperty.call()`. If it does, the property value is assigned to the target object.

**Pros and Cons of Traditional For-In Loop with Type Checks:**

Pros:

* Fast performance (no need to serialize objects)
* Works with older JavaScript versions

Cons:

* Can be slower than other approaches if the source object has many properties
* Requires explicit type checks using `Object.prototype.hasOwnProperty.call()`

**Other Considerations**

* The benchmark uses Firefox 94 as the test browser, which may not accurately represent real-world performance.
* The benchmark only measures execution speed and does not consider other important factors like memory usage or code readability.

**Alternative Approaches**

Some alternative approaches to merging objects without mutation include:

1. Using `lodash.merge()`: a popular utility library that provides a fast and readable way to merge objects.
2. Using `es6.object.assign()` with `Symbol.for('toStringTag')`: a variant of `Object.assign()` that uses a more efficient algorithm for large objects.
3. Implementing custom merging logic using bitwise operators or recursion.

Keep in mind that the performance differences between these approaches may vary depending on the specific use case and browser version.

Related benchmarks:

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