Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
JavaScript spread operator vs Object.assign performance (bigger objects)
(version: 1)
Comparing performance of:
Using the spread operator vs Using Object.assign
Created:
one year ago
by:
Guest
Jump to the latest result
Tests:
Using the spread operator
const firstObject = { name: 'Alice', age: 25, contact: { email: 'alice@example.com', phone: '123-456-7890', }, preferences: { language: 'English', timezone: 'UTC', }, }; const secondObject = { job: 'Software Engineer', skills: ['JavaScript', 'React', 'Node.js'], contact: { email: 'alice.work@example.com', }, preferences: { theme: 'dark mode', }, }; const finalObject = { ...firstObject, ...secondObject };
Using Object.assign
const firstObject = { name: 'Alice', age: 25, contact: { email: 'alice@example.com', phone: '123-456-7890', }, preferences: { language: 'English', timezone: 'UTC', }, }; const secondObject = { job: 'Software Engineer', skills: ['JavaScript', 'React', 'Node.js'], contact: { email: 'alice.work@example.com', }, preferences: { theme: 'dark mode', }, }; const finalObject = Object.assign(firstObject, secondObject);
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
Using the spread operator
Using Object.assign
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
8 months ago
)
User agent:
Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:142.0) Gecko/20100101 Firefox/142.0
Browser/OS:
Firefox 142 on Ubuntu
View result in a separate tab
Embed
Embed Benchmark Result
Test name
Executions per second
Using the spread operator
557604.0 Ops/sec
Using Object.assign
1669266.8 Ops/sec
Autogenerated LLM Summary
(model
gpt-4o-mini
, generated one year ago):
The provided benchmark tests the performance of two different methods for merging JavaScript objects: the spread operator (`...`) and the `Object.assign()` method. Both techniques are commonly used to combine properties from multiple objects into a single object, which can be a typical requirement in JavaScript programming. ### Comparison of Options 1. **Using the Spread Operator (`...`)** - **Implementation**: ```javascript const finalObject = { ...firstObject, ...secondObject }; ``` - **Performance**: The benchmark result shows approximately 13,793,965 executions per second for the spread operator. - **Pros**: - **Conciseness**: The syntax is cleaner and more intuitive, allowing for easier readability. - **Shallow Copy**: Creates a new object by copying the properties from the source objects, minimizing the risk of accidental mutations to the original objects. - **Flexibility**: Supports merging properties directly in object literals. - **Cons**: - May have a slight overhead compared to `Object.assign()` in certain scenarios, although in modern JavaScript engines, this is often negligible. 2. **Using `Object.assign()`** - **Implementation**: ```javascript const finalObject = Object.assign(firstObject, secondObject); ``` - **Performance**: The benchmark result shows approximately 17,301,034 executions per second for `Object.assign()`. - **Pros**: - **Mutability Control**: When using `Object.assign()` with the first argument as a new object, you can avoid modifying the original objects. - **Functionality**: Useful for cloning objects and also allows the option to merge properties while specifying the target object. - **Cons**: - **Verbosity**: The syntax is more verbose and may be less intuitive compared to the spread operator. - **Mutates the First Argument**: If not used correctly, it can lead to unintended mutations of the source objects if the first argument is not a new object. ### Considerations - **Browser Compatibility**: The spread operator is part of ES6 (ES2015) and is well-supported in modern browsers, but may not work in older environments. `Object.assign()` is also part of ES6 and faces similar support issues. - **Shallow vs. Deep Copy**: Both methods perform shallow copies, meaning that if your objects contain nested objects, only references to the nested objects are copied, not their contents. If deep copying is required, a different approach or library (like Lodash's `cloneDeep`) would be needed. ### Alternatives 1. **Lodash or Underscore.js**: - Libraries such as Lodash provide utility functions that can simplify object manipulation, including deep merging of objects. 2. **JSON methods**: - Using `JSON.parse(JSON.stringify(object))` can create a deep copy of an object but isn't suitable for functions, `undefined`, or circular references. 3. **Manual Merge**: - Writing a custom function to recursively merge objects to handle specific use cases or structures might be beneficial. ### Conclusion The benchmark clearly indicates higher performance for `Object.assign()` in this particular case, but the choice between the spread operator and `Object.assign()` can depend on readability, use case, and personal or team preference. Understanding the pros and cons of both methods can guide engineers in selecting the appropriate approach for their specific requirement.
Related benchmarks:
JavaScript spread operator vs Object.assign performance 2000
Object.assisn vs Spread
json and
Spread vs object.assing vs forEach
Spread vs object.assing vs forEach pt3
Spread vs object.assing vs forEach pt4
JavaScript spread operator vs Object.assign performance - modify object
JavaScript spread operator vs Object.assign performance - modify object - v2
Jason stringify vs object.keys
Comments
Confirm delete:
Do you really want to delete benchmark?