Benchmark: Deep copy comparison with structuredClone

Deep copy comparison with structuredClone (version: 0)

Benchmarks for StackOverflow question on deep copy techniques https://stackoverflow.com/questions/7486085/copy-array-by-value/23536726#23536726

Comparing performance of: spread ... vs slice() vs splice(0) vs concat() vs JSON.parse(JSON.stringify()) vs Custom function vs Lodash.cloneDeep() vs structuredClone

Created: one year ago by: Guest

Jump to the latest result

HTML Preparation code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Tests:

spread ...
const arr1 = [ true, 1, "true", [], {}, function () {} ]; // Deep copies: true, 1, "true" // Shallow copies: [], {}, function () {} const arr2 = [ ...arr1 ];
slice()
const arr1 = [ true, 1, "true", [], {}, function () {} ]; // Deep copies: true, 1, "true" // Shallow copies: [], {}, function () {} const arr2 = arr1.slice();
splice(0)
const arr1 = [ true, 1, "true", [], {}, function () {} ]; // Deep copies: true, 1, "true" // Shallow copies: [], {}, function () {} const arr2 = arr1.splice(0);
concat()
const arr1 = [ true, 1, "true", [], {}, function () {} ]; // Deep copies: true, 1, "true" // Shallow copies: [], {}, function () {} const arr2 = arr1.concat();
JSON.parse(JSON.stringify())
const arr1 = [ true, 1, "true", [], {}, function () {} ]; // Deep copies: true, 1, "true", [], {} // Shallow copies: function () {} const arr2 = JSON.parse(JSON.stringify(arr1));
Custom function
function copy(aObject) { // Prevent undefined objects // if (!aObject) return aObject; let bObject = Array.isArray(aObject) ? [] : {}; let value; for (const key in aObject) { // Prevent self-references to parent object // if (Object.is(aObject[key], aObject)) continue; value = aObject[key]; bObject[key] = (typeof value === "object") ? copy(value) : value; } return bObject; } const arr1 = [ true, 1, "true", [], {}, function () {} ]; // Deep copies: true, 1, "true", [], {}, function () {} const arr2 = copy(arr1);
Lodash.cloneDeep()
const arr1 = [ true, 1, "true", [], {}, function () {} ]; // Deep copies: true, 1, "true", [], {}, function () {} const arr2 = _.cloneDeep(arr1);
structuredClone
const arr1 = [ true, 1, "true", [], {} ]; // Deep copies: true, 1, "true", [], {}, function () {} const arr2 = structuredClone(arr1)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
spread ...
slice()
splice(0)
concat()
JSON.parse(JSON.stringify())
Custom function
Lodash.cloneDeep()
structuredClone

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 14; SM-A528B Build/UP1A.231005.007) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.6723.106 Mobile Safari/537.36 OPT/2.9

Browser/OS: Chrome Mobile 130 on Android

View result in a separate tab

Test name	Executions per second
spread ...	14543539.0 Ops/sec
slice()	17444542.0 Ops/sec
splice(0)	12902719.0 Ops/sec
concat()	16137571.0 Ops/sec
JSON.parse(JSON.stringify())	849936.8 Ops/sec
Custom function	610601.4 Ops/sec
Lodash.cloneDeep()	413529.9 Ops/sec
structuredClone	174995.6 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

**Benchmark Overview**

The provided benchmark measures the performance of different methods for creating deep and shallow copies of arrays in JavaScript. The test cases use a sample array `arr1` with various data types, including booleans, numbers, strings, empty objects, and functions. The goal is to create identical copies of this array using different methods.

**Methods Compared**

The benchmark compares six methods:

1. **`slice()`**: A built-in method for creating shallow copies of arrays.
2. **`concat()`**: A built-in method for concatenating arrays and creating shallow copies.
3. **`splice(0)`**: Creating a shallow copy by removing the first element (index 0) using `splice()`.
4. **`spread(...)`**: Creating a shallow copy using the spread operator (`...`).
5. **Custom function**: A custom implementation for creating deep copies of arrays.
6. **Lodash's `cloneDeep()`**: Using Lodash's utility function to create deep copies of arrays.
7. **`structuredClone()`**: A new method introduced in ECMAScript 2022, which creates deep copies of complex values.

**Performance Results**

The benchmark results are shown for each test case, with the number of executions per second (ExecutionsPerSecond) for each browser. The fastest result is highlighted:

| TestName | ExecutionsPerSecond |
| --- | --- |
| `slice()` | 10114699.0 |
| `concat()` | 6577965.0 |
| `splice(0)` | 6103873.5 |
| `spread(...)` | 382987.40625 |
| Custom function | 219602.46875 |
| Lodash's `cloneDeep()` | 745503.4375 |
| `structuredClone()` | 745503.4375 |

**Interpretation**

The results indicate that:

* The built-in methods `slice()` and `concat()` are the fastest for creating shallow copies.
* The custom function is slower than the other methods.
* Lodash's `cloneDeep()` is faster than the custom function but slower than the built-in methods.
* `structuredClone()` is surprisingly competitive with Lodash's implementation.

**Conclusion**

The benchmark highlights the performance differences between various methods for creating deep and shallow copies of arrays in JavaScript. The built-in methods `slice()` and `concat()` emerge as the fastest, while Lodash's `cloneDeep()` provides a good alternative. The custom function and `structuredClone()` are slower but still worth considering for specific use cases.

Keep in mind that performance can vary depending on the specific use case, JavaScript engine, and browser version used. Always benchmark your code to determine the best approach for your particular requirements.

Related benchmarks:

Deep copy comparison with structuredClone (version: 0)

Benchmarks for StackOverflow question on deep copy techniques https://stackoverflow.com/questions/7486085/copy-array-by-value/23536726#23536726

Comparing performance of: spread ... vs slice() vs splice(0) vs concat() vs JSON.parse(JSON.stringify()) vs Custom function vs Lodash.cloneDeep() vs structuredClone

Created: one year ago by: Guest

Jump to the latest result

spread ...

slice()

splice(0)

concat()

JSON.parse(JSON.stringify())

Custom function

Lodash.cloneDeep()

structuredClone

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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