Benchmark: JavaScript spread operator vs Object.assign vs for-in loop safe 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 hasOwnProperty
const firstObject = { sampleData: 'Hello world' } const secondObject = { moreData: 'foo bar' } const finalObject = {} for (let key in firstObject) { if (Object.prototype.hasOwnProperty.call(firstObject, key)) { finalObject[key] = firstObject[key]; } } for (let key in secondObject) { if (Object.prototype.hasOwnProperty.call(secondObject, key)) { finalObject[key] = secondObject[key]; } }

Historical Performance Data aggregated from 41 community runs

Desktop Results:

Chrome 31 runs

Using For-In loop

58.6M/s

Using the spread operator

34.3M/s

Using Object.assign

10.8M/s

Using For-In loop with hasOwnProperty

6.8M/s

Fastest: Using For-In loop (8.6x faster)

View exact numbers

✓ Using For-In loop: 58,622,980 ops/sec
• Using the spread operator: 34,328,856 ops/sec
• Using Object.assign: 10,773,756 ops/sec
• Using For-In loop with hasOwnProperty: 6,839,729 ops/sec

Firefox 10 runs

Using For-In loop

23.7M/s

Using Object.assign

17.0M/s

Using For-In loop with hasOwnProperty

11.9M/s

Using the spread operator

10.2M/s

Fastest: Using For-In loop (2.3x faster)

View exact numbers

✓ Using For-In loop: 23,674,884 ops/sec
• Using Object.assign: 16,963,084 ops/sec
• Using For-In loop with hasOwnProperty: 11,926,582 ops/sec
• Using the spread operator: 10,196,156 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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 hasOwnProperty

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 8 months ago)

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

Browser/OS: Firefox 145 on Linux

View result in a separate tab

Using For-In loop

16.3M/s

Using Object.assign

13.5M/s

Using For-In loop with hasOwnProperty

10.1M/s

Using the spread operator

9.4M/s

View exact numbers

Test name	Executions per second
✓ Using For-In loop	16,262,519 Ops/sec
Using Object.assign	13,491,494 Ops/sec
Using For-In loop with hasOwnProperty	10,132,150 Ops/sec
Using the spread operator	9,416,741 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in this benchmark.

The test is designed to measure which method is the fastest for merging two objects without mutating them. The three methods being compared are:

1. **Spread Operator (`...`)**: This syntax allows you to create a new object by spreading the properties of an existing object.
2. **Object.assign()**: This function returns a shallow copy of all enumerable own properties of source objects into a new target object.
3. **For-In loop**: This method iterates over the properties of an object and assigns each property value to a new object.

**Pros and Cons of each approach:**

1. **Spread Operator (`...`)**:
	* Pros: Concise, easy to read, and maintainable code. It creates a new object with all the properties from both sources.
	* Cons: Can be slower than other methods due to the overhead of creating a new object, and it's not supported in older browsers.
2. **Object.assign()**:
	* Pros: Fast, widely supported (works in most modern browsers), and can be used for shallow copies only.
	* Cons: Creates a new object, but may not preserve all properties if they're objects themselves.
3. **For-In loop**:
	* Pros: Allows control over each property's assignment, which can be useful for some scenarios.
	* Cons: Can lead to more complex and harder-to-read code, especially when dealing with nested objects.

The use of `Object.prototype.hasOwnProperty.call()` in the For-In loop variant adds an extra layer of complexity, as it checks if the property belongs to the object itself (not inherited from a prototype), which can be beneficial for avoiding unintended property assignments.

**Other considerations:**

* The benchmark only tests merging two objects. If you need to merge more than two objects or handle additional complexities like arrays, functions, or nested objects, other methods like `Object.assign()` with multiple sources or libraries like Lodash might be a better fit.
* When dealing with large datasets or performance-critical applications, you may want to consider using native Web Assembly (WASM) or other optimized libraries for efficient object merging.

**Alternative approaches:**

1. **Lodash's `merge()` function**: This is a popular and well-maintained library that provides a flexible way to merge objects, including support for nested objects, arrays, and more.
2. **Underscore.js's `merge()` function**: Another widely used library that offers similar functionality to Lodash's `merge()`, with some additional features like handling nested arrays.
3. **Using native JavaScript methods**: You can also use native methods like `Object.entries()`, `Array.prototype.forEach()`, and `Object.fromEntries()` to create a custom merge function.

Keep in mind that the choice of method ultimately depends on your specific use case, performance requirements, and personal preference.

JavaScript spread operator vs Object.assign vs for-in loop safe 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 hasOwnProperty`

Created: 4 years ago by: Guest

Go to the latest result

Using the spread operator

Using Object.assign

Using For-In loop

Using For-In loop with hasOwnProperty

Historical Performance Data aggregated from 41 community runs

Desktop Results:

Chrome 31 runs

Firefox 10 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

JavaScript spread operator vs Object.assign vs for-in loop safe 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 hasOwnProperty

Created: 4 years ago by: Guest

Go to the latest result

Using the spread operator

Using Object.assign

Using For-In loop

Using For-In loop with hasOwnProperty

Historical Performance Data aggregated from 41 community runs

Desktop Results:

Chrome 31 runs

Firefox 10 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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