Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Object.assign vs destructuring again
(version: 1)
Comparing performance of:
Object.assign vs Destructuring
Created:
one year ago
by:
Guest
Go to the latest result
Script Preparation code:
const obj = { one: 'one' };
Tests:
Object.assign
const res = Object.assign(obj, { toString: function() { return this.one; }});
Destructuring
const res = {...obj, toString: function() { return this.one; }};
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
Object.assign
Destructuring
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:136.0) Gecko/20100101 Firefox/136.0
Browser/OS:
Firefox 136 on Mac OS X 10.15
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=589688" width="100%" height="500px"></iframe>
Object.assign
21.2M/s
Destructuring
13.7M/s
View exact numbers
Test name
Executions per second
✓
Object.assign
21,209,232 Ops/sec
Destructuring
13,726,364 Ops/sec
Autogenerated LLM Summary
(model
gpt-4o-mini
, generated one year ago):
The benchmark titled "Object.assign vs destructuring again" aims to compare two JavaScript approaches for merging objects and adding new properties: using `Object.assign()` and the spread syntax (`...`). ### Approaches Being Compared 1. **Object.assign** - **Benchmark Definition**: ```javascript const res = Object.assign(obj, { toString: function() { return this.one; }}); ``` - **Test Name**: "Object.assign" - **Description**: - `Object.assign()` is a built-in method that copies the values of all enumerable own properties from one or more source objects to a target object. In this case, it takes an existing object `obj` and adds a new property `toString` to it, which is a function that returns the value of `this.one`. 2. **Destructuring (with spread)** - **Benchmark Definition**: ```javascript const res = {...obj, toString: function() { return this.one; }}; ``` - **Test Name**: "Destructuring" - **Description**: - The spread syntax (`...`) allows an iterable (like an object) to be expanded in places where zero or more elements are expected. This syntax creates a new object, incorporating all properties from `obj` and adding a new `toString` function. ### Pros and Cons #### Object.assign - **Pros**: - Directly modifies the target object, which might be desirable in certain scenarios. - Simplicity in terms of syntax for copying properties. - **Cons**: - Can lead to mutation of the original object if not used carefully (since it's modifying `obj` directly). - Less efficient in terms of performance when merging multiple objects due to its nature of performing more operations. #### Destructuring (Spread Syntax) - **Pros**: - Creates a new object, which is a more functional programming approach that avoids side effects and mutations to existing objects. - Generally more concise and easier to read, especially for combining multiple objects. - **Cons**: - Can be slightly less performant compared to `Object.assign()` in specific cases, as it creates a new object rather than modifying an existing one. - When dealing with very large objects or when merging many objects, the performance cost can be higher due to the copy. ### Benchmark Results - The benchmark results show that `Object.assign` resulted in **21,209,232 executions per second**, while the destructuring approach had **13,726,364 executions per second** in Firefox. This indicates that, at least in this context and environment, `Object.assign` was significantly faster. ### Other Considerations - Performance may vary across different browsers and environments. The benchmark was conducted on Firefox 136 on macOS, so results might differ when tested in other browsers or platforms. - Similar benchmarks in other contexts might yield different results based on the size of the objects being merged, the number of properties, and the overall complexity of the added functions. ### Alternatives Other alternatives for merging or combining objects in JavaScript include: - **Using `Object.entries()` / `Object.fromEntries()`**: It can be used to merge key-value pairs with more control, but involves more steps. - **Lodash's `_.merge()`**: A utility library that can deeply merge objects but may introduce additional overhead. - **ES6 classes with inheritance**: For scenarios where behavior and structure are essential, creating a class might be better suited than object merging. This benchmark provides a practical insight into the performance trade-offs between two common methodologies for object merging in JavaScript.
Related benchmarks
Variable assignment from object | traditional vs destructuring
Assignment of value vs Destructuring an object
Destructure vs Traditional
Spread vs Object.assign (modify ) vs Object.assign (new)
Assignment of value vs Destructuring an object (direct assign insted of variable )
Object.assign vs destructuring
Comments
Confirm delete:
Do you really want to delete benchmark?