Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
compare Object.assign vs spread operator
(version: 0)
Benchmark.js
Comparing performance of:
Object.assign vs spread operator
Created:
6 years ago
by:
Registered User
Go to the latest result
Tests:
Object.assign
var params = { b:"hello", c: true, d:7 }; var newObj = { a: 2 }; var other = Object.assign({},newObj, params);
spread operator
var params = { b:"hello", c: true, d:7 }; var newObj = { a: 2 }; var other = { ...newObj, ...params };
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
Object.assign
spread operator
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 years ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36 Edg/123.0.0.0
Browser/OS:
Chrome 123 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=518453" width="100%" height="500px"></iframe>
spread operator
9.4M/s
Object.assign
3.7M/s
View exact numbers
Test name
Executions per second
✓
spread operator
9,398,957 Ops/sec
Object.assign
3,684,784 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
I'll explain what's tested in the provided JSON, compare options, pros and cons of those approaches, and discuss other considerations. **What is being tested?** The benchmark tests two JavaScript methods: `Object.assign` and the spread operator (also known as rest parameter syntax). The test creates an object with some initial properties (`newObj`) and another object with additional properties (`params`). The objective is to merge these two objects into a new one, which is stored in the `other` variable. **Options compared** There are two options being compared: 1. **`Object.assign()`**: This method takes multiple source objects as arguments and merges them into a target object. 2. **Spread operator (`...`)**: This syntax allows you to create a new object by spreading the properties of an existing object or array. **Pros and Cons** **`Object.assign()`:** Pros: * Well-established method with good support across browsers and platforms. * Can be used with any number of source objects. * Supports merging arrays and objects. Cons: * Less readable code, as it requires calling a specific function to merge objects. * Can lead to confusing syntax when dealing with multiple sources. **Spread operator (`...`):** Pros: * More concise and expressive syntax than `Object.assign()`. * Easier to read and understand, especially for merging single objects or arrays. * Less error-prone, as it eliminates the need for function calls. Cons: * Requires support for rest parameters (introduced in ECMAScript 2015) which might not be available in older browsers. * Can lead to issues if used with non-object values (e.g., functions, arrays). **Other considerations** Both methods have their trade-offs. `Object.assign()` is more reliable and flexible, while the spread operator provides a cleaner syntax. However, the spread operator's performance may vary depending on the browser and JavaScript engine. In this benchmark, the results suggest that the spread operator has an advantage in terms of execution speed. **Library usage** There are no libraries being used in these test cases. **Special JS features or syntax** The spread operator is a relatively new feature introduced in ECMAScript 2015. It allows using rest parameters (`...`) to create new objects from existing ones. **Alternatives** Other alternatives for merging objects could be: * `lodash.merge()`: A popular utility library that provides an efficient and flexible way to merge objects. * `Object.create()` + `Object.assign()`: This approach involves creating a new object using `Object.create()` and then assigning properties using `Object.assign()`. * **Manual iteration**: Using `for` loops or `Array.prototype.forEach()` to iterate over the source objects' properties and assign them to the target object. Keep in mind that these alternatives might not be as concise or readable as the spread operator, but they can provide a more traditional approach to merging objects.
Related benchmarks
JavaScript spread operator vs Object.assign performance (single addition)
JavaScript spread operator vs Object.assign performance - Kien Nguyen
Object.assign() vs spread operator (New object)
Comments
Confirm delete:
Do you really want to delete benchmark?