Benchmark: Lodash cloneDeep vs structuredClone vs recursiveDeepCopy vs JSON clone with a simple and 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 MySimpleObject = {
    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 MyDeepObject = {
    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...',
                                                something: [0, 1, 2, 3, 3, 4, 4, 5, 5, 5, 3, 24, 234, 2, 34, 23, 4, 23, 4, 234],
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
};

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(MySimpleObject); myCopy = _.cloneDeep(MyDeepObject);
structuredClone
myCopy = structuredClone(MySimpleObject); myCopy = structuredClone(MyDeepObject);
recursiveDeepCopy
myCopy = recursiveDeepCopy(MySimpleObject); myCopy = recursiveDeepCopy(MyDeepObject);
Json clone
myCopy = JSON.parse(JSON.stringify(MySimpleObject)); myCopy = JSON.parse(JSON.stringify(MyDeepObject));

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: 10 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36

Browser/OS: Chrome 137 on Windows

View result in a separate tab

Test name	Executions per second
Lodash	205658.7 Ops/sec
structuredClone	120423.4 Ops/sec
recursiveDeepCopy	1135860.8 Ops/sec
Json clone	203223.4 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 Definition**

The benchmark tests four different approaches to creating a deep copy of an object:

1. `recursiveDeepCopy`: A custom function that recursively clones the object by iterating over its properties and cloning each one.
2. `Lodash.cloneDeep`: A function from the Lodash library that creates a deep clone of an object.
3. `structuredClone`: A new API introduced in JavaScript 2020, which allows creating a deep copy of an object without relying on libraries like Lodash.
4. `JSON.parse(JSON.stringify())`: A method that converts an object to a JSON string and then parses it back into an object.

**Options Compared**

The benchmark compares the performance of these four approaches on two test cases: `MySimpleObject` and `MyDeepObject`. Each approach is tested multiple times, with varying degrees of complexity in the input objects.

**Pros and Cons**

Here's a brief summary of each approach:

* `recursiveDeepCopy`: Pros: flexible and customizable, but can be slow for large objects due to the recursive nature. Cons: error-prone and may not work as expected for complex data structures.
* `Lodash.cloneDeep`: Pros: efficient and reliable, widely used library with a simple API. Cons: depends on external dependencies and may have performance overhead for very large objects.
* `structuredClone`: Pros: fast and efficient, built-in API that eliminates dependency on libraries like Lodash. Cons: relatively new feature, may require additional setup or browser support.
* `JSON.parse(JSON.stringify())`: Pros: simple and widely supported, but can lead to issues with cyclic references and complex data structures. Cons: performance overhead for large objects.

**Performance Results**

According to the latest benchmark results, the order of performance is:

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

The performance difference between these approaches can be significant, especially for large input objects. This highlights the importance of choosing an efficient and reliable approach when working with complex data structures in JavaScript.

Keep in mind that browser support and execution frequency may affect the actual performance results. The latest benchmark results are just one snapshot; it's essential to consider multiple factors when evaluating performance in your specific use case.

Related benchmarks:

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

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

Created: 2 years ago by: Guest

Jump to the latest result

Lodash

structuredClone

recursiveDeepCopy

Json clone

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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