Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
Object.assign vs foreach set
(version: 0)
Benchmark.js
Comparing performance of:
Object.assign vs spread operator vs foreach
Created:
3 years ago
by:
Guest
Go to the latest result
Tests:
Object.assign
var params = { b:"hello", c: true, d:7 }; var other = Object.assign({ a: 2 }, params);
spread operator
var params = { b:"hello", c: true, d:7 }; var other = { a: 2, ...params };
foreach
var params = [ ["b", "hello"], ["c", true], ["a", 5] ]; var other = { a: 2 }; params.forEach(style => { other[style[0]] = style[1]; });
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
Object.assign
spread operator
foreach
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:134.0) Gecko/20100101 Firefox/134.0
Browser/OS:
Firefox 134 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=580996" width="100%" height="500px"></iframe>
foreach
18.8M/s
Object.assign
14.9M/s
spread operator
9.8M/s
View exact numbers
Test name
Executions per second
✓
foreach
18,765,666 Ops/sec
Object.assign
14,859,739 Ops/sec
spread operator
9,825,907 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net. **Benchmark Overview** The provided benchmark measures the performance of three different approaches to merge objects in JavaScript: 1. `Object.assign()` 2. Spread operator (`{ ... }`) 3. `forEach()` loop **Options Compared** Each test case compares two or more options, allowing users to see which approach is fastest. **Pros and Cons of Each Approach** * **`Object.assign()`**: This method is a built-in JavaScript function that takes an object and merges it with another object. It's concise but can be slow due to its overhead. + Pros: Concise syntax, widely supported + Cons: Can be slow, may not work as expected with certain data types * **Spread Operator (`{ ... }`)**: This method uses the spread operator (`...`) to merge objects. It's more efficient than `Object.assign()` and can handle complex object structures. + Pros: Efficient, flexible syntax, handles complex objects well + Cons: May not be supported in older browsers or JavaScript versions * **`forEach()` Loop**: This approach uses a loop to iterate over the properties of an array (or other iterable) and merges them into a new object. It's often slower than the spread operator but can be useful for more complex merge scenarios. + Pros: Can handle complex objects, flexible syntax + Cons: May be slow, less efficient than spread operator **Library and Purpose** There is no specific library mentioned in the benchmark definitions. The `Object.assign()` method is a built-in JavaScript function, while the spread operator (`{ ... }`) is also a native part of modern JavaScript. **Special JS Features or Syntax** The spread operator (`{ ... }`) uses a new syntax introduced in ECMAScript 2018 (ES10). This feature allows for more concise and expressive object merging. The `forEach()` loop uses a built-in JavaScript method, but it's not as elegant as the spread operator. **Other Alternatives** If you need to merge objects in JavaScript, there are other alternatives: * Using `Object.assign()` with an array of key-value pairs (`Object.assign({}, ...props)`) * Using a library like Lodash's `_.merge()` function * Using a third-party library like Immutable.js for functional programming Keep in mind that the choice of approach depends on your specific use case, performance requirements, and personal preference.
Related benchmarks
Spread vs Object.assign (modify ) vs Object.assign (new)
Object.assign() vs Reflect.set()
Comments
Confirm delete:
Do you really want to delete benchmark?