Benchmark: structuredClone vs _.cloneDeep vs JSON - 2

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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36 Edg/126.0.0.0

Browser/OS: Chrome 126 on Windows

View result in a separate tab

Test name	Executions per second
Lodash cloneDeep	431302.2 Ops/sec
Native JSON parse	531851.7 Ops/sec
structuredClone	270876.9 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and its test cases.

**Benchmark Description**

The benchmark compares three methods for creating a copy of an array in JavaScript:

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

These methods are used to create a deep copy of the input array, which means they need to recursively clone all nested objects and arrays.

**Lodash Clone Deep**

The first test case uses Lodash's `cloneDeep` function to create a deep copy of the input array. Lodash is a popular utility library that provides various functions for common tasks in JavaScript.

**Native JSON Parse**

The second test case uses the native `JSON.parse(JSON.stringify())` method to create a deep copy of the input array. This method is based on the fact that `JSON.stringify()` can serialize objects and arrays, and then `JSON.parse()` can deserialize them back into their original form.

**structuredClone**

The third test case uses the new `structuredClone` function, which was introduced in ECMAScript 2020. This function creates a deep copy of an object or array by recursively cloning all its properties and references.

**Pros and Cons of Each Approach**

* **Lodash Clone Deep**
	+ Pros: Easy to use, well-tested, and widely supported.
	+ Cons: Adds external dependency (Lodash), which may not be desirable for smaller projects.
* **Native JSON Parse**
	+ Pros: No external dependencies required, easy to understand.
	+ Cons: Can lead to issues with circular references or complex objects.
* **structuredClone**
	+ Pros: New feature, optimized for performance, and no external dependencies required.
	+ Cons: May not be supported in older browsers or environments.

**Library and Purpose**

Lodash is a utility library that provides various functions for common tasks in JavaScript, including array manipulation, object creation, and more. Its `cloneDeep` function creates a deep copy of an object or array by recursively cloning all its properties and references.

**Special JS Features or Syntax**

* The benchmark uses the new `structuredClone` function, which is a feature introduced in ECMAScript 2020.
* The `JSON.parse(JSON.stringify())` method relies on the fact that `JSON.stringify()` can serialize objects and arrays, and then `JSON.parse()` can deserialize them back into their original form.

**Other Alternatives**

If you're looking for alternative methods to create a deep copy of an array in JavaScript, here are a few options:

* Using `Array.prototype.slice()`: Creates a shallow copy of the array.
* Using `Array.prototype.reduce()`: Creates a new array with the same elements as the original array.
* Using a simple loop: Manually cloning each element of the array using a loop.

However, keep in mind that these alternatives may not be as efficient or reliable as the methods used in this benchmark.

Related benchmarks:

structuredClone vs _.cloneDeep vs JSON - 2 (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):