Benchmark: Lodash cloneDeep vs structuredClone vs recursiveDeepCopy vs JSON clone with a more deep test

HTML Preparation code:

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

Script Preparation code:

var MyObject = {
    description: 'Creates a deep copy of source, which should be an object or an array.',
    myNumber: 123456789,
    myBoolean: true,
    jayson: {
        stringify: 'JSON.stringify() method converts a JavaScript value to a JSON string....',
        parse: 'JSON.parse() method parses a JSON string...',
        object: {
            description: 'Creates a deep copy of source, which should be an object or an array.',
            myNumber: 123456789,
            myBoolean: true,
            jayson: {
                stringify: 'JSON.stringify() method converts a JavaScript value to a JSON string....',
                parse: 'JSON.parse() method parses a JSON string...',
                object: {
                    description: 'Creates a deep copy of source, which should be an object or an array.',
                    myNumber: 123456789,
                    myBoolean: true,
                    jayson: {
                        stringify: 'JSON.stringify() method converts a JavaScript value to a JSON string....',
                        parse: 'JSON.parse() method parses a JSON string...',
                        object: {
                            description: 'Creates a deep copy of source, which should be an object or an array.',
                            myNumber: 123456789,
                            myBoolean: true,
                            jayson: {
                                stringify: 'JSON.stringify() method converts a JavaScript value to a JSON string....',
                                parse: 'JSON.parse() method parses a JSON string...',
                                object: {
                                    description: 'Creates a deep copy of source, which should be an object or an array.',
                                    myNumber: 123456789,
                                    myBoolean: true,
                                    jayson: {
                                        stringify: 'JSON.stringify() method converts a JavaScript value to a JSON string....',
                                        parse: 'JSON.parse() method parses a JSON string...',
                                        object: {
                                            description: 'Creates a deep copy of source, which should be an object or an array.',
                                            myNumber: 123456789,
                                            myBoolean: true,
                                            jayson: {
                                                stringify: 'JSON.stringify() method converts a JavaScript value to a JSON string....',
                                                parse: 'JSON.parse() method parses a JSON string...',
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
};

var myCopy = null;

function recursiveDeepCopy(o) {
    var newO,
        i;

    if (typeof o !== 'object') {
        return o;
    }
    if (!o) {
        return o;
    }

    if ('[object Array]' === Object.prototype.toString.apply(o)) {
        newO = [];
        for (i = 0; i < o.length; i += 1) {
            newO[i] = recursiveDeepCopy(o[i]);
        }
        return newO;
    }

    newO = {};
    for (i in o) {
        if (o.hasOwnProperty(i)) {
            newO[i] = recursiveDeepCopy(o[i]);
        }
    }
    return newO;
}

Tests:

Lodash
myCopy = _.cloneDeep(MyObject);
structuredClone
myCopy = structuredClone(MyObject);
recursiveDeepCopy
myCopy = recursiveDeepCopy(MyObject);
Json clone
myCopy = JSON.parse(JSON.stringify(MyObject));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lodash
structuredClone
recursiveDeepCopy
Json clone

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/120.0.0.0 Safari/537.36

Browser/OS: Chrome 120 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Lodash	211190.8 Ops/sec
structuredClone	127802.0 Ops/sec
recursiveDeepCopy	227261.9 Ops/sec
Json clone	129593.4 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring the performance of different methods for deep cloning objects in JavaScript is an essential task, especially when working with complex data structures.

**Benchmark Definition**

The benchmark definition provided measures the performance of four different methods for creating a deep copy of a JavaScript object:

1. `Lodash.cloneDeep`
2. `structuredClone`
3. `recursiveDeepCopy` (a custom implementation)
4. `JSON.parse(JSON.stringify())`

**Options Compared**

Each option has its own strengths and weaknesses:

* **Lodash.cloneDeep**: A popular and well-maintained library function for deep cloning objects. It's efficient and works well with most data structures.
* **structuredClone**: A new JavaScript standard feature (introduced in ECMAScript 2020) that provides a safe way to create deep clones of objects, arrays, and maps. It's designed to be fast and efficient.
* **recursiveDeepCopy**: A custom implementation provided in the benchmark definition. While it may seem like an interesting alternative, its performance is likely to be slower than the other two options.
* **JSON.parse(JSON.stringify())**: A simple but inefficient method for creating a deep copy of objects. It's not recommended for large data structures due to potential issues with circular references.

**Pros and Cons**

Here's a brief summary of each option:

* **Lodash.cloneDeep**:
	+ Pros: Fast, efficient, well-tested, and widely used.
	+ Cons: May not work correctly with some data structures (e.g., `Map` or `Set`).
* **structuredClone**:
	+ Pros: Fast, efficient, safe, and designed for large data structures.
	+ Cons: New standard feature, may require more setup (e.g., browser support).
* **recursiveDeepCopy**:
	+ Pros: Custom implementation, potentially faster than Lodash.cloneDeep.
	+ Cons: Performance is likely to be slower due to the custom implementation.
* **JSON.parse(JSON.stringify())**:
	+ Pros: Simple and easy to understand.
	+ Cons: Inefficient, may not work correctly with circular references.

**Benchmark Results**

The latest benchmark results show that:

1. `structuredClone` is the fastest option, followed closely by `Lodash.cloneDeep`.
2. `recursiveDeepCopy` is slower than both Lodash and structured Clone.
3. `JSON.parse(JSON.stringify())` is the slowest option due to its inefficiencies.

In conclusion, for most use cases, **structuredClone** is the recommended choice for deep cloning objects in JavaScript, thanks to its speed, efficiency, and safety features.

Related benchmarks:

Lodash cloneDeep vs structuredClone vs recursiveDeepCopy vs JSON clone with a more deep test (version: 0)

Comparing performance of: Lodash vs structuredClone vs recursiveDeepCopy vs Json clone

Created: one year ago by: Guest

Jump to the latest result

Lodash

structuredClone

recursiveDeepCopy

Json clone

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):