Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
JavaScript shallow copy spread operator, deep reference vs shallow reference
(version: 0)
Comparing performance of:
Using the spread operator with deep reference vs Using the spread operator with shallow reference
Created:
3 years ago
by:
Guest
Jump to the latest result
Tests:
Using the spread operator with deep reference
const objectToCopy = { objectlevel2: { 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'], } } const finalObject = {...objectToCopy.objectlevel2};
Using the spread operator with shallow reference
const objectToCopy = { objectlevel2: { 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'], } } const removeDepth = objectToCopy.objectlevel2 const finalObject = {...removeDepth};
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
Using the spread operator with deep reference
Using the spread operator with shallow reference
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 its options. The benchmark measures the performance of JavaScript's spread operator when creating a new object with different types of references: deep reference and shallow reference. **Deep Reference vs Shallow Reference** In JavaScript, an object reference is either a "deep" or a "shallow" reference. A deep reference means that the new object will have all the same properties as the original object, including nested objects. A shallow reference, on the other hand, creates a new object with references to the same properties as the original object, but without recursively creating new objects. **Spread Operator** The spread operator (`...`) is used to create a new array or object by spreading the elements of an existing array or object. When used with objects, it creates a new object with references to the same properties. In this benchmark, we have two test cases: 1. **Using the spread operator with deep reference**: This test case uses the spread operator to create a new object `finalObject` by spreading the `objectToCopy.objectlevel2` property from the original object `objectToCopy`. Since the spread operator creates a deep copy of the nested object, both objects will have their own copies of the nested properties. 2. **Using the spread operator with shallow reference**: This test case uses the spread operator to create a new object `finalObject` by spreading the `removeDepth` variable, which is an alias for `objectToCopy.objectlevel2`. Since `removeDepth` is a shallow copy of the original property, both objects will share the same nested properties. **Pros and Cons** * **Deep Reference**: Creates a new object with its own copies of all nested properties, which can be beneficial when working with complex data structures. + Pros: Preserves data integrity, reduces memory usage, and makes it easier to work with immutable data. + Cons: Can lead to increased memory consumption and slower performance due to the creation of multiple objects. * **Shallow Reference**: Creates a new object with references to the same nested properties as the original object, which can be beneficial when working with simple data structures or when performance is critical. + Pros: Reduces memory usage, improves performance, and makes it easier to work with mutable data. + Cons: Can lead to issues with data integrity and concurrency, especially when working with shared data. **Other Considerations** * **Memory Usage**: Creating a new object with deep references can result in increased memory consumption due to the creation of multiple objects. Shallow references, on the other hand, can reduce memory usage by reusing existing objects. * **Performance**: Creating a new object with shallow references is generally faster than creating a new object with deep references since it involves less overhead. **Benchmark Results** The benchmark results show that the execution per second for the test case using the spread operator with deep reference (8685487.0) is higher than the test case using the spread operator with shallow reference (8568885.0). This suggests that creating a new object with shallow references may be faster in this particular scenario, which could be beneficial when performance is critical. However, it's essential to note that the benchmark results may vary depending on the specific use case and requirements. When working with complex data structures or ensuring data integrity, using deep references might be a better choice.
Related benchmarks:
JS object copy spread vs assign
JavaScript spread operator vs Object.assign performance for cloning
Using SPREAD operator to change a reference
object.assign vs spread operator for shallow copying large objects 2
Comments
Confirm delete:
Do you really want to delete benchmark?