Benchmark: Lodash cloneDeep vs custom cloneDeep vs structuredClone

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
    }]
}];

var testCopy = null;

var deepClone = function(obj) {
    if (Array.isArray(obj)) {
        return obj.map(deepClone)
    } else {
        var out = {};
        const keys = Object.keys(obj);
        for (let i = 0, l = keys.length; i < l; i++) {
            const key = keys[i];
            out[key] = deepClone(obj[key]);
        }
        return out
    }
    return obj;
};

Tests:

Lodash cloneDeep
testCopy = _.cloneDeep(testArray);
Native JSON parse
testCopy = JSON.parse(JSON.stringify(testArray));
Recursive deep clone
testCopy = deepClone(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
Recursive deep clone
structuredClone

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 9 months ago)

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

Browser/OS: Chrome 138 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Lodash cloneDeep	681895.2 Ops/sec
Native JSON parse	1174557.4 Ops/sec
Recursive deep clone	0.0 Ops/sec
structuredClone	548893.9 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 compares four approaches to create an array copy/clone:

1. **Lodash cloneDeep**: Uses the `_.cloneDeep()` function from the Lodash library.
2. **Native JSON parse**: Uses the built-in `JSON.parse(JSON.stringify())` method.
3. **Recursive deep clone**: Implements a custom recursive function, `deepClone()`, to create an array copy/clone.
4. **structuredClone**: Uses the recently introduced `structuredClone()` function in modern JavaScript.

**Options Compared**

The benchmark compares the performance of each approach on an array with various data types (numbers, strings, objects, and nested arrays).

**Pros and Cons of Each Approach**

1. **Lodash cloneDeep**:
	* Pros: Easy to use, well-tested, and widely supported.
	* Cons: Adds a dependency on Lodash, which may not be desirable for small projects or those with strict dependencies.
2. **Native JSON parse**:
	* Pros: Fast, lightweight, and doesn't add any dependencies.
	* Cons: May not work correctly with circular references or certain data types (e.g., functions).
3. **Recursive deep clone**:
	* Pros: Customizable, can handle complex data structures.
	* Cons: Can be slow for large arrays due to the recursive nature of the function.
4. **structuredClone**:
	* Pros: Fast, modern, and efficient.
	* Cons: Requires a compatible browser (Edge 118 or Chrome 118 in this case).

**Library: Lodash**

Lodash is a popular JavaScript library that provides various utility functions for tasks like array manipulation, object transformation, and more. The `_.cloneDeep()` function is specifically designed to create deep copies of arrays, objects, and other data structures.

**Special JS Feature or Syntax**

The benchmark uses the `structuredClone()` function, which was introduced in ECMAScript 2022 (ES12). This new feature provides a fast and efficient way to create copies of complex data structures. However, it may not be supported by all browsers yet.

Overall, the benchmark highlights the importance of choosing an array cloning approach that balances performance, ease of use, and compatibility with different browsers and projects.

Related benchmarks:

Lodash cloneDeep vs custom cloneDeep vs structuredClone (version: 0)

compare array copy/clone methods

Comparing performance of: Lodash cloneDeep vs Native JSON parse vs Recursive deep clone vs structuredClone

Created: 3 years ago by: Guest

Jump to the latest result

Lodash cloneDeep

Native JSON parse

Recursive deep clone

structuredClone

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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