Benchmark: Deep copy comparison with structuredClone

Deep copy comparison with structuredClone (version: 0) Benchmark.js

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

Go 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 year 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

slice()

17.4M/s

concat()

16.1M/s

spread ...

14.5M/s

splice(0)

12.9M/s

JSON.parse(JSON.stringify())

850K/s

Custom function

611K/s

Lodash.cloneDeep()

414K/s

structuredClone

175K/s

View exact numbers

Test name	Executions per second
✓ slice()	17,444,542 Ops/sec
concat()	16,137,571 Ops/sec
spread ...	14,543,539 Ops/sec
splice(0)	12,902,719 Ops/sec
JSON.parse(JSON.stringify())	849,937 Ops/sec
Custom function	610,601 Ops/sec
Lodash.cloneDeep()	413,530 Ops/sec
structuredClone	174,996 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year 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.