Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
object merge
(version: 0)
Benchmark.js
Comparing performance of:
spread vs assign vs for
Created:
3 years ago
by:
Guest
Go to the latest result
Tests:
spread
const obj1 = {a: 1, b: 2, c: 3}; const obj2 = {d: 4, e: 5, f: 6}; const obj3 = {...obj1, ...obj2}; console.log(obj3);
assign
const obj1 = {a: 1, b: 2, c: 3}; const obj2 = {d: 4, e: 5, f: 6}; Object.assign(obj1, obj2); console.log(obj1);
for
const obj1 = {a: 1, b: 2, c: 3}; const obj2 = {d: 4, e: 5, f: 6}; for (var n in obj2) {obj1[n] = obj2[n];} console.log(obj1);
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
spread
assign
for
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 years ago
)
User agent:
Mozilla/5.0 (iPhone; CPU iPhone OS 17_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.4 Mobile/15E148 Safari/604.1
Browser/OS:
Mobile Safari 17 on iOS 17.4
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=514124" width="100%" height="500px"></iframe>
for
846K/s
assign
739K/s
spread
721K/s
View exact numbers
Test name
Executions per second
✓
for
845,611 Ops/sec
assign
739,256 Ops/sec
spread
720,847 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided benchmarking JSON and explain what is being tested, compared, and their pros and cons. **Benchmark Definition** The `benchmark_definition` section is empty, which means that no specific operations or logic are defined for the test case. This suggests that the tests are focused on comparing different methods of merging objects in JavaScript. **Individual Test Cases** There are three test cases: 1. **Spread**: This test case uses the spread operator (`...`) to merge two objects, `obj1` and `obj2`, into a new object, `obj3`. The benchmark measures how fast this operation is executed. * Library: No specific library is used in this test. * Special JS feature/syntax: Spread operator is used, which is a modern JavaScript syntax introduced in ECMAScript 2018 (ES2018). 2. **Assign**: This test case uses the `Object.assign()` method to merge two objects, `obj1` and `obj2`, into a new object, `obj3`. The benchmark measures how fast this operation is executed. * Library: No specific library is used in this test. * Special JS feature/syntax: None 3. **For**: This test case uses a traditional loop to iterate over the properties of `obj2` and assign values from `obj1` to `obj3`. The benchmark measures how fast this operation is executed. * Library: No specific library is used in this test. * Special JS feature/syntax: None **Comparison** The three test cases are comparing different approaches to merge objects: * Spread operator (`...`) * `Object.assign()` method * Traditional loop using `for` loop **Pros and Cons** Here's a brief summary of the pros and cons of each approach: 1. **Spread Operator (...) + Pros: Concise, modern syntax, and efficient for small to medium-sized objects. + Cons: May not be supported in older browsers or environments, and can lead to unexpected behavior if not used carefully. 2. **Object.assign() Method** + Pros: Widely supported across browsers and environments, easy to read and understand, and suitable for large objects. + Cons: Can be slower than the spread operator for small objects due to method call overhead. 3. **Traditional Loop using `for` Loop** + Pros: Easy to implement, widely supported, and can be optimized for performance. + Cons: Can be verbose, less readable than other approaches, and may not be suitable for large or complex objects. **Other Alternatives** There are additional methods available for merging objects in JavaScript, such as: * `Object.create()` method * `Object.assign()` with an array of properties (e.g., `[obj1, obj2]`) * Custom merge functions using JavaScript's built-in `Array.prototype.forEach` or `Object.keys()` methods However, these alternatives are less commonly used and may not be supported across all browsers and environments.
Related benchmarks
Lodash Custom Merge
Merging array of objects [Lodash merge vs Array.prototype.reduce merge] v2
JavaScript spread operator vs Object.assign performance vs a custom merge object method
Comments
Confirm delete:
Do you really want to delete benchmark?