Benchmark: JavaScript shallow copy spread operator, deep reference vs shallow reference

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>

Previous results

Test case name	Result
Using the spread operator with deep reference
Using the spread operator with shallow reference

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):

LLMs can make mistakes. Check important info.

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.

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Linux; Android 12; 2107113SG) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 108 on Android

View result in a separate tab

Test name	Executions per second
Using the spread operator with deep reference	8685487.0 Ops/sec
Using the spread operator with shallow reference	8568885.0 Ops/sec

Related benchmarks:

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: 2 years ago by: Guest

Jump to the latest result

Using the spread operator with deep reference

Using the spread operator with shallow reference

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):