Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
JavaScript spread operator vs Object.assign vs mutation performance with condition #8
(version: 0)
Comparing performance of:
Using the spread operator vs Using Object.assign vs Using mutation vs Using iterable mutation
Created:
3 years ago
by:
Guest
Jump to the latest result
Tests:
Using the spread operator
const firstObject = { a: 'a', b: 'b', c: 'c', d: 'd', e: 'e', f: 'f', g: 'g' } const secondObject = { 0: 0, 1: 1, 2: 2, 3: 3, 4: '4', 5: '5', 6: '6', 7: '7' } const conditionState = Boolean(Object.keys(secondObject).length) const finalObject = { ...firstObject, ...(conditionState ? secondObject : {}), ...(conditionState ? secondObject : {}), ...(!conditionState ? secondObject : {}) };
Using Object.assign
const firstObject = { a: 'a', b: 'b', c: 'c', d: 'd', e: 'e', f: 'f', g: 'g' } const secondObject = { 0: 0, 1: 1, 2: 2, 3: 3, 4: '4', 5: '5', 6: '6', 7: '7' } const conditionState = Boolean(Object.keys(secondObject).length) const finalObject = Object.assign(firstObject, conditionState && secondObject, conditionState && secondObject, !conditionState && secondObject);
Using mutation
const firstObject = { a: 'a', b: 'b', c: 'c', d: 'd', e: 'e', f: 'f', g: 'g' } const secondObject = { 0: 0, 1: 1, 2: 2, 3: 3, 4: '4', 5: '5', 6: '6', 7: '7' } const conditionState = Boolean(Object.keys(secondObject).length) const finalObject = { a: firstObject.a, b: firstObject.b, c: firstObject.c, d: firstObject.d, e: firstObject.e, f: firstObject.f, g: firstObject.g } if (conditionState) { finalObject[0] = secondObject[0] finalObject[1] = secondObject[1] finalObject[2] = secondObject[2] finalObject[3] = secondObject[3] finalObject[4] = secondObject[4] finalObject[5] = secondObject[5] finalObject[6] = secondObject[6] finalObject[7] = secondObject[7] } if (conditionState) { finalObject[0] = secondObject[0] finalObject[1] = secondObject[1] finalObject[2] = secondObject[2] finalObject[3] = secondObject[3] finalObject[4] = secondObject[4] finalObject[5] = secondObject[5] finalObject[6] = secondObject[6] finalObject[7] = secondObject[7] } if (!conditionState) { finalObject[0] = secondObject[0] finalObject[1] = secondObject[1] finalObject[2] = secondObject[2] finalObject[3] = secondObject[3] finalObject[4] = secondObject[4] finalObject[5] = secondObject[5] finalObject[6] = secondObject[6] finalObject[7] = secondObject[7] }
Using iterable mutation
const firstObject = { a: 'a', b: 'b', c: 'c', d: 'd', e: 'e', f: 'f', g: 'g' } const secondObject = { 0: 0, 1: 1, 2: 2, 3: 3, 4: '4', 5: '5', 6: '6', 7: '7' } const conditionState = Boolean(Object.keys(secondObject).length) const finalObject = {} for (const key in finalObject) { finalObject[key] = firstObject[key] } if (conditionState) { for (const key in secondObject) { finalObject[key] = secondObject[key] } } if (conditionState) { for (const key in secondObject) { finalObject[key] = secondObject[key] } } if (!conditionState) { for (const key in secondObject) { finalObject[key] = secondObject[key] } }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (4)
Previous results
Fork
Test case name
Result
Using the spread operator
Using Object.assign
Using mutation
Using iterable mutation
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 provided benchmark JSON and test cases. **What is tested?** The benchmark measures the performance of three different approaches to merge two objects: using the spread operator (`...`), `Object.assign()`, and mutation (directly accessing and assigning properties). The test case provides a specific scenario: * Two objects are defined: `firstObject` with 7 properties, and `secondObject` with 8 properties. * A condition `conditionState` is evaluated based on the length of `secondObject`. * The final object `finalObject` is constructed using one of three approaches: + Using the spread operator (`...`): `{ ...firstObject, ...conditionState ? secondObject : {}, ...!conditionState ? secondObject : {} }` + Using `Object.assign()`: `Object.assign(firstObject, conditionState ? secondObject : {})` + Using mutation: `finalObject = {}; for (const key in finalObject) { finalObject[key] = firstObject[key]; } if (conditionState) { for (const key in secondObject) { finalObject[key] = secondObject[key]; } }` **Performance comparison** The benchmark results show the performance of each approach on a Chrome 108 browser, measured in executions per second. The results are: * Using mutation: 734,098.0625 executions/second * Using iterable mutation (for loop): 306,423.375 executions/second * Using Object.assign(): 135,905.546875 executions/second * Using the spread operator: 130,335.4375 executions/second **Performance analysis** The performance results suggest that: * Mutation is the fastest approach, likely due to its direct access and assignment of properties. * Iterable mutation (using for loops) is slower than mutation but faster than `Object.assign()`. * `Object.assign()` is significantly slower than the other two approaches. The spread operator's performance is close to iterable mutation's, which might be due to its similar algorithmic complexity. Keep in mind that these results are specific to this test case and may not generalize to all scenarios. Additionally, the performance differences between these approaches may vary depending on the browser, device platform, operating system, and other factors. It's worth noting that `Object.assign()` is generally considered more efficient than the spread operator because it avoids creating a new object with shallow copies of the source properties. The spread operator creates a new object with deep copies of the source properties, which can lead to performance overhead for large objects or complex data structures.
Related benchmarks:
JavaScript spread operator vs Object.assign performance for cloning
Spread vs Object.assign (modify ) vs Object.assign (new)
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?