Benchmark: Lodash cloneDeep vs structuredClone 2asdasdas

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...',
        a: {
            stringify: 'JSON.stringify() method converts a JavaScript value to a JSON string....',
            parse: 'JSON.parse() method parses a JSON string...',
            a: {
                stringify: 'JSON.stringify() method converts a JavaScript value to a JSON string....',
                parse: 'JSON.parse() method parses a JSON string...',
                a: {
                    stringify: 'JSON.stringify() method converts a JavaScript value to a JSON string....',
                    parse: 'JSON.parse() method parses a JSON string...',
                    a: {
                        stringify: 'JSON.stringify() method converts a JavaScript value to a JSON string....',
                        parse: 'JSON.parse() method parses a JSON string...',
                        a: {
                            stringify: 'JSON.stringify() method converts a JavaScript value to a JSON string....',
                            parse: 'JSON.parse() method parses a JSON string...',
                            a: {
                                stringify: 'JSON.stringify() method converts a JavaScript value to a JSON string....',
                                parse: 'JSON.parse() method parses a JSON string...'
                            }
                        }
                    }
                }
            }
        }
    }
};

var myCopy = null;

Tests:

Lodash cloneDeep
myCopy = _.cloneDeep(MyObject);
Native structuredClone
myCopy = structuredClone(MyObject);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lodash cloneDeep
Native structuredClone

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

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

Browser/OS: Chrome 123 on Windows

View result in a separate tab

Test name	Executions per second
Lodash cloneDeep	535768.9 Ops/sec
Native structuredClone	242265.7 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 details of the benchmark.

**Benchmark Overview**

The test is designed to compare two methods for creating a deep copy of an object: `_.cloneDeep` from the Lodash library and `structuredClone`. The test case uses a predefined JavaScript object (`MyObject`) with nested properties, including arrays and objects with complex structures.

**Library and Purpose**

Lodash's `cloneDeep` method is used to create a deep copy of an object. It recursively creates new objects for all properties of the original object, ensuring that the resulting copy is independent from the original.

The native `structuredClone` function (introduced in Chrome 123) is also used as a test case. It's a new API designed to create immutable clones of JavaScript values, including objects. Its purpose is to provide a safer alternative to traditional cloning methods like JSON.stringify() or `Object.assign()`.

**Comparison Options**

In this benchmark, two options are compared:

1. **Lodash cloneDeep**: This method uses the Lodash library to create a deep copy of the object.
2. **Native structuredClone**: This method uses the native `structuredClone` function to create an immutable clone of the object.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

1. **Lodash cloneDeep**:
	* Pros: widely supported, easy to use, provides a robust way to create deep copies.
	* Cons: requires the Lodash library to be loaded, may not perform as well for very large objects due to memory usage.
2. **Native structuredClone**:
	* Pros: optimized for performance and safety, uses modern browser features, reduces memory usage compared to traditional cloning methods.
	* Cons: newer API (Chrome 123), may require additional setup or configuration in older browsers.

**Special JS Features or Syntax**

In this benchmark, the `structuredClone` function is used, which introduces a new feature in JavaScript. This function allows for creating immutable clones of JavaScript values and is designed to be more efficient and safe than traditional cloning methods. The syntax is simple and straightforward: `structuredClone(obj)`.

**Other Alternatives**

If you're interested in exploring alternative deep copy methods, here are some other options:

* **JSON.stringify() + Object.assign()**: This approach uses JSON.stringify() to serialize the object into a string and then creates a new object using Object.assign(), which copies the properties from the string.
* **Array.prototype.slice()**: For arrays, you can use Array.prototype.slice() to create a shallow copy. For objects, you would need to implement a custom recursive cloning function.

Keep in mind that each of these alternatives has its pros and cons, and some may be more suitable for specific use cases or performance requirements.

I hope this explanation helps!

Related benchmarks:

Lodash cloneDeep vs structuredClone 2asdasdas (version: 0)

https://developer.mozilla.org/en-US/docs/Web/API/structuredClone

Comparing performance of: Lodash cloneDeep vs Native structuredClone

Created: 2 years ago by: Guest

Jump to the latest result

Lodash cloneDeep

Native structuredClone

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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