Benchmark: structuredClone vs _.cloneDeep vs JSON

HTML Preparation code:


<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>

Script Preparation code:

var testArray = [{
    description: 'Random description.',
    testNumber: 123456789,
    testBoolean: true,
    testObject: {
        testString: 'test string',
        testNumber: 12345
    },
    testArray: [{
        myName: 'test name',
        myNumber: 123245
    }]
}, {
    description: 'Random description.',
    testNumber: 123456789,
    testBoolean: true,
    testObject: {
        testString: 'test string',
        testNumber: 12345
    },
    testArray: [{
        myName: 'test name',
        myNumber: 123245
    }]
}];

Tests:

Lodash cloneDeep
testCopy = _.cloneDeep(testArray);
Native JSON parse
testCopy = JSON.parse(JSON.stringify(testArray));
structuredClone
testCopy = structuredClone(testArray);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lodash cloneDeep
Native JSON parse
structuredClone

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Browser/OS: Chrome 126 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Lodash cloneDeep	433865.6 Ops/sec
Native JSON parse	686087.9 Ops/sec
structuredClone	359468.5 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 benchmark and explain what's being tested.

**Benchmark Definition:**
The website is comparing three methods for cloning an array in JavaScript:

1. `_.cloneDeep` from the Lodash library
2. `JSON.parse(JSON.stringify(testArray))`
3. `structuredClone`

**Options Being Compared:**

* `_.cloneDeep`: a deep-cloning function from the Lodash library, which creates a new copy of the original array, including all its nested properties.
* `JSON.parse(JSON.stringify(testArray))`: a native JavaScript method that uses JSON serialization and deserialization to create a deep copy of the original array. However, this method has some limitations (more on this later).
* `structuredClone`: a relatively new function introduced in JavaScript 2020, which creates a shallow clone of the original array by recursively copying its properties.

**Pros and Cons:**

* `_.cloneDeep`:
	+ Pros: provides a deep clone, handles nested objects and arrays, and is generally considered safe.
	+ Cons: requires the Lodash library to be included in the project, which might add unnecessary dependencies.
* `JSON.parse(JSON.stringify(testArray))`:
	+ Pros: widely supported, lightweight, and doesn't require any additional libraries.
	+ Cons: has limitations when dealing with complex data structures, such as functions or undefined values. These are not serialized properly, which can lead to unexpected behavior in the cloned array.
* `structuredClone`:
	+ Pros: provides a shallow clone, is relatively new and might be optimized for performance, and doesn't require any additional libraries.
	+ Cons: still experimental (as of my knowledge cutoff), might not work as expected with all types of data structures.

**Library Usage:**
The Lodash library (`_.cloneDeep`) is used to provide a deep-cloning function. The `structuredClone` function is a native JavaScript feature that doesn't require any additional libraries.

**Special JS Feature or Syntax:**
There isn't any specific JavaScript feature or syntax being tested in this benchmark, apart from the usage of `JSON.parse(JSON.stringify(testArray))`, which has some limitations as mentioned earlier.

**Other Alternatives:**
If you need to clone an array in JavaScript and don't want to use Lodash, you could consider using:

* The spread operator (`[...originalArray]`)
* `Object.assign()` with an empty object (`Object.assign({}, originalArray)`)
* A custom recursive function that clones the array

Keep in mind that each of these alternatives has its own set of trade-offs and might not provide the same level of performance or safety as `_.cloneDeep` or `structuredClone`.

Related benchmarks:

structuredClone vs _.cloneDeep vs JSON (version: 0)

compare array copy/clone methods sdfewfe

Comparing performance of: Lodash cloneDeep vs Native JSON parse vs structuredClone

Created: one year ago by: Guest

Jump to the latest result

Lodash cloneDeep

Native JSON parse

structuredClone

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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