Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Test case: Spread vs Object.assign
(version: 5)
Comparing performance of:
Merge 2 Objects with spread vs Merge 2 Objects with Object.assign vs Add/Edit one object with spread vs Add/Edit one object with object.assign
Created:
7 years ago
by:
Registered User
Jump to the latest result
Tests:
Merge 2 Objects with spread
const firstObject = { "sampleData": "Hello world" }; const secondObject = { "test": "ValueOfTest", "debug": "on", "window": { "title": "Sample Konfabulator Widget", "name": "main_window", "width": 500, "height": 500 }, "image": { "src": "Images/Sun.png", "name": "sun1", "hOffset": 250, "vOffset": 250, "alignment": "center" }, "text": { "data": "Click Here", "size": 36, "style": "bold", "name": "text1", "hOffset": 250, "vOffset": 100, "alignment": "center", "onMouseUp": "sun1.opacity = (sun1.opacity / 100) * 90;" } }; const finalObject = { ...firstObject, ...secondObject };
Merge 2 Objects with Object.assign
const firstObject = { "sampleData": "Hello world" }; const secondObject = { "test": "ValueOfTest", "debug": "on", "window": { "title": "Sample Konfabulator Widget", "name": "main_window", "width": 500, "height": 500 }, "image": { "src": "Images/Sun.png", "name": "sun1", "hOffset": 250, "vOffset": 250, "alignment": "center" }, "text": { "data": "Click Here", "size": 36, "style": "bold", "name": "text1", "hOffset": 250, "vOffset": 100, "alignment": "center", "onMouseUp": "sun1.opacity = (sun1.opacity / 100) * 90;" } }; const finalObject = Object.assign({}, firstObject, secondObject);
Add/Edit one object with spread
const firstObject = { "test": "ValueOfTest", "debug": "on", "window": { "title": "Sample Konfabulator Widget", "name": "main_window", "width": 500, "height": 500 }, "image": { "src": "Images/Sun.png", "name": "sun1", "hOffset": 250, "vOffset": 250, "alignment": "center" }, "text": { "data": "Click Here", "size": 36, "style": "bold", "name": "text1", "hOffset": 250, "vOffset": 100, "alignment": "center", "onMouseUp": "sun1.opacity = (sun1.opacity / 100) * 90;" } }; const finalObject = { ...firstObject, test:"ValueOfTest 2" };
Add/Edit one object with object.assign
const firstObject = { "test": "ValueOfTest", "debug": "on", "window": { "title": "Sample Konfabulator Widget", "name": "main_window", "width": 500, "height": 500 }, "image": { "src": "Images/Sun.png", "name": "sun1", "hOffset": 250, "vOffset": 250, "alignment": "center" }, "text": { "data": "Click Here", "size": 36, "style": "bold", "name": "text1", "hOffset": 250, "vOffset": 100, "alignment": "center", "onMouseUp": "sun1.opacity = (sun1.opacity / 100) * 90;" } }; const finalObject = Object.assign({}, firstObject, {test: "ValueOfTest 2"});
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (4)
Previous results
Fork
Test case name
Result
Merge 2 Objects with spread
Merge 2 Objects with Object.assign
Add/Edit one object with spread
Add/Edit one object with object.assign
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the benchmark and explain what's being tested. **Benchmark Definition** The benchmark compares three ways to merge two objects: `Object.assign`, using the spread operator (`...`), and concatenating strings. **Options Compared** 1. **Merge 2 Objects with Object.assign**: This method uses the `Object.assign()` function to merge two objects. 2. **Add/Edit one object with spread**: This method uses the spread operator (`...`) to add or edit a single property in an existing object. 3. **Merge 2 Objects with spread**: This method uses the spread operator (`...`) to merge two objects. **Pros and Cons of Each Approach** 1. **Object.assign** * Pros: + Widely supported by most browsers. + Can handle nested objects and arrays. * Cons: + May be slower than other methods due to its overhead. 2. **Spread Operator (Add/Edit one object)** * Pros: + Fast and efficient for adding or editing a single property. + Easy to read and understand. * Cons: + Not as widely supported by older browsers. + May not work correctly with nested objects or arrays. 3. **Spread Operator (Merge 2 Objects)** * Pros: + Fast and efficient for merging two objects. + Easy to read and understand. * Cons: + Requires JavaScript version 7.0 or higher. **Benchmark Results** The latest benchmark results show that: 1. Adding or editing a single property with the spread operator is the fastest method, executing approximately 4568449 executions per second on a desktop device running Firefox 105. 2. Merging two objects using the spread operator (Merge 2 Objects) is slightly slower than adding or editing a single property, but still quite fast, executing around 3473269 executions per second. In contrast, merging two objects using `Object.assign()` is the slowest method, executing approximately 2649406 executions per second on a desktop device running Firefox 105. Overall, these results suggest that for most use cases, the spread operator (Add/Edit one object or Merge 2 Objects) is a good choice due to its speed and simplicity. However, if you need to support older browsers or handle complex merging scenarios, `Object.assign()` might still be a better option.
Related benchmarks:
Spread vs Object.assign (modify ) vs Object.assign (new)
object.assign vs spread to create a copy
Object.assign mutation vs spread
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?