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

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 hasOwnProperty

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 days ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36

Browser/OS: Chrome 134 on Windows

View result in a separate tab

Test name	Executions per second
Using the spread operator	37821168.0 Ops/sec
Using Object.assign	28400752.0 Ops/sec
Using For-In loop	57670288.0 Ops/sec
Using For-In loop with hasOwnProperty	31112040.0 Ops/sec

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

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:

Spread Operator (...): This syntax allows you to create a new object by spreading the properties of an existing object.
Object.assign(): This function returns a shallow copy of all enumerable own properties of source objects into a new target object.
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:

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.
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.
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:

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.
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.
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.

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.

Related benchmarks:

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

Jump to the latest result

Using the spread operator

Using Object.assign