Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
Merge objects with spread vs foreach & new
(version: 0)
Benchmark.js
Comparing performance of:
Spread object vs forEach & new
Created:
3 years ago
by:
Guest
Go to the latest result
Script Preparation code:
var a = {'a': 10, 'b': 20, 'c': 30}; var b = {'b': 21, 'c': 31};
Tests:
Spread object
var c = {...a, ...b};
forEach & new
var c = {} Object.keys(a).forEach(k => c[k] = a[k]); Object.keys(b).forEach(k => c[k] = b[k]);
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
Spread object
forEach & new
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year ago
)
User agent:
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36
Browser/OS:
Chrome 115 on Linux
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=576780" width="100%" height="500px"></iframe>
Spread object
20.1M/s
forEach & new
6.0M/s
View exact numbers
Test name
Executions per second
✓
Spread object
20,076,260 Ops/sec
forEach & new
5,960,717 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the details of this benchmark. **Overview** This benchmark compares two approaches for merging objects in JavaScript: using the spread operator (`...`) and using `Array.prototype.forEach` with `Object.keys`. The test is designed to measure which approach is faster and more efficient. **Options Compared** Two options are compared: 1. **Spread Operator (Spread)**: Using the spread operator (`...`) to merge two objects into a new object. This method creates a new object by copying all enumerable own properties from one or more source objects onto it. 2. **forEach & new**: Using `Array.prototype.forEach` with `Object.keys` to iterate over the keys of both objects and assign their values to a new object. **Pros and Cons** 1. **Spread Operator (Spread)**: * Pros: concise, readable, and efficient way to merge objects. * Cons: may not work as expected if one or more sources are null or undefined. 2. **forEach & new**: * Pros: flexible, handles any number of source objects, and can be used with other iteration methods (e.g., `for` loop). * Cons: slightly less readable and concise than the spread operator method. **Library and Purpose** The only library used in this benchmark is not explicitly stated, but it appears to be a basic JavaScript implementation. However, if we assume a modern browser environment (like Chrome 114), some built-in functions like `Object.keys()` might rely on a library or framework. In this case, since the results are consistent across multiple browsers and devices, it's likely that any necessary libraries or frameworks are included in the benchmark environment. **Special JS Feature/Syntax** This benchmark doesn't explicitly test any special JavaScript features or syntax. It focuses solely on two standard object merging approaches. **Other Alternatives** Before this benchmark was created, developers might have used other methods for merging objects, such as: * Using `Object.assign()`: This method has been deprecated since ECMAScript 2015 (ES6) in favor of the spread operator (`...`). * Recursion: One could create a recursive function to merge two or more objects. * Using `Array.prototype.reduce()`: Another approach would be to use `reduce()` to iterate over the keys and values of both sources. These alternatives might still be viable options for merging objects in certain situations, but they are less concise and readable than the spread operator method used in this benchmark.
Related benchmarks
lodash merge vs object.assign vs spread with arrays
lodash merge vs object.assign vs spread with deep values
Comments
Confirm delete:
Do you really want to delete benchmark?