Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
JavaScript shallow copy spread operator vs Object.assign performance 2X
(version: 0)
Benchmark.js
Comparing performance of:
Using the spread operator vs Using Object.assign
Created:
2 years ago
by:
Guest
Go to the latest result
Script Preparation code:
window.objectToCopy = { sampleString1: 'Hello world', sampleNumber1: 123456789, sampleArray1: ['hello', 'world', 'how', 'are', 'you'], sampleString2: 'Hello world', sampleNumber2: 123456789, sampleArray2: ['hello', 'world', 'how', 'are', 'you'], sampleString3: 'Hello world', sampleNumber3: 123456789, sampleArray3: ['hello', 'world', 'how', 'are', 'you'], sampleString4: 'Hello world', sampleNumber4: 123456789, sampleArray4: ['hello', 'world', 'how', 'are', 'you'], sampleString5: 'Hello world', sampleNumber5: 123456789, sampleArray5: ['hello', 'world', 'how', 'are', 'you'], sampleString6: 'Hello world', sampleNumber6: 123456789, sampleArray6: ['hello', 'world', 'how', 'are', 'you'], sampleString7: 'Hello world', sampleNumber7: 123456789, sampleArray7: ['hello', 'world', 'how', 'are', 'you'], sampleString8: 'Hello world', sampleNumber8: 123456789, sampleArray8: ['hello', 'world', 'how', 'are', 'you'], sampleString9: 'Hello world', sampleNumber9: 123456789, sampleArray9: ['hello', 'world', 'how', 'are', 'you'], sampleString10: 'Hello world', sampleNumber10: 123456789, sampleArray10: ['hello', 'world', 'how', 'are', 'you'], } window.objectToCopy2 = { xsampleString1: 'Hello world', xsampleNumber1: 123456789, xsampleArray1: ['hello', 'world', 'how', 'are', 'you'], xsampleString2: 'Hello world', xsampleNumber2: 123456789, xsampleArray2: ['hello', 'world', 'how', 'are', 'you'], xsampleString3: 'Hello world', xsampleNumber3: 123456789, xsampleArray3: ['hello', 'world', 'how', 'are', 'you'], xsampleString4: 'Hello world', xsampleNumber4: 123456789, xsampleArray4: ['hello', 'world', 'how', 'are', 'you'], xsampleString5: 'Hello world', xsampleNumber5: 123456789, xsampleArray5: ['hello', 'world', 'how', 'are', 'you'], xsampleString6: 'Hello world', xsampleNumber6: 123456789, xsampleArray6: ['hello', 'world', 'how', 'are', 'you'], xsampleString7: 'Hello world', xsampleNumber7: 123456789, xsampleArray7: ['hello', 'world', 'how', 'are', 'you'], xsampleString8: 'Hello world', xsampleNumber8: 123456789, xsampleArray8: ['hello', 'world', 'how', 'are', 'you'], xsampleString9: 'Hello world', xsampleNumber9: 123456789, xsampleArray9: ['hello', 'world', 'how', 'are', 'you'], xsampleString10: 'Hello world', xsampleNumber10: 123456789, xsampleArray10: ['hello', 'world', 'how', 'are', 'you'], }
Tests:
Using the spread operator
const object = window.objectToCopy const object2 = window.objectToCopy2 const finalObject = { ...object,...object2, };
Using Object.assign
const object = window.objectToCopy const object2 = window.objectToCopy2 const finalObject = Object.assign({}, object, object2);
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:
2 years ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36
Browser/OS:
Chrome 119 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=503591" width="100%" height="500px"></iframe>
Using the spread operator
861K/s
Using Object.assign
473K/s
View exact numbers
Test name
Executions per second
✓
Using the spread operator
861,337 Ops/sec
Using Object.assign
473,020 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided benchmark and explain what's being tested, compared, and their pros and cons. **Benchmark Definition:** The benchmark is comparing the performance of two approaches to create a shallow copy of an object: 1. Using the spread operator (`const finalObject = { ...object, ...object2 };`) 2. Using `Object.assign()` (`const finalObject = Object.assign({}, object, object2);`) **What's being tested:** The benchmark is testing which approach creates a shallow copy of the `window.objectToCopy` and `window.objectToCopy2` objects faster. **Options compared:** Two options are being compared: 1. **Spread operator**: Using the spread operator (`{ ...object, ...object2 }`) to create a new object that includes all properties from both `object` and `object2`. This approach is often considered more concise and readable than using `Object.assign()`. 2. **Object.assign():** Using `Object.assign()` to create a new object by copying properties from `object` and `object2` into a new object. **Pros and Cons of each approach:** 1. **Spread operator:** * Pros: + Concise and readable code + Creates a shallow copy, which is often sufficient for most use cases * Cons: + Can be slower than `Object.assign()` due to the overhead of creating a new object using the spread syntax 2. **Object.assign():** * Pros: + Generally faster than the spread operator due to optimized implementation in modern browsers + Creates a shallow copy, which is often sufficient for most use cases * Cons: + Can be less readable and more verbose compared to the spread operator **Library/Functionality used:** In this benchmark, `Object.assign()` is used as part of the JavaScript standard library. It's a built-in function that allows you to copy properties from one or more sources into a new object. **Special JS feature or syntax:** The use of the spread operator (`{ ...object, ...object2 }`) is a modern JavaScript feature introduced in ECMAScript 2018 (ES8). It allows you to create a new object by copying properties from an existing object using the `...` syntax. **Other alternatives:** If you need to create a deep copy of an object instead of a shallow one, you can use libraries like Lodash or a custom implementation. Additionally, if you're working with older browsers that don't support the spread operator, you may need to stick with `Object.assign()`.
Related benchmarks
JavaScript shallow copy spread operator vs Object.assign performance
JavaScript shallow copy spread operator vs Object.assign vs Object.assign mutate
Comments
Confirm delete:
Do you really want to delete benchmark?