Benchmark: lodash clonedeep vs json.parse(stringify()) vs structuredClone

HTML Preparation code:

<script src='https://cdn.jsdelivr.net/npm/lodash@4.17.21/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...'
  }
};

Tests:

Lodash CloneDeep
myCopy = _.cloneDeep(MyObject);
JSON Clone
myCopy = JSON.parse(JSON.stringify(MyObject));
structuredClone
myCopy = structuredClone(MyObject)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lodash CloneDeep
JSON Clone
structuredClone

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 126 on Mac OS X 10.15.7

View result in a separate tab

Lodash CloneDeep

1.5M/s

JSON Clone

1.2M/s

structuredClone

686K/s

View exact numbers

Test name	Executions per second
✓ Lodash CloneDeep	1,472,396 Ops/sec
JSON Clone	1,215,980 Ops/sec
structuredClone	685,872 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided benchmark compares three methods for creating a deep copy of an object: Lodash's `cloneDeep`, JSON's `parse` and `stringify` methods, and the `structuredClone` function.

**What is being tested?**

In this benchmark, we're testing the performance of each method in creating a deep copy of a complex object with nested properties. The object includes an array, a boolean, and another object with its own properties.

**Options Compared:**

1. **Lodash CloneDeep**: Uses Lodash's `cloneDeep` function to create a deep copy of the original object.
2. **JSON Clone**: Uses JSON's `parse` and `stringify` methods to create a deep copy of the original object. This involves converting the object to a JSON string, parsing it back into an object, and then cloning it.
3. **structuredClone**: Uses the `structuredClone` function (introduced in ECMAScript 2020) to create a deep copy of the original object.

**Pros and Cons:**

1. **Lodash CloneDeep**:
	* Pros: Efficient and widely supported by Lodash users.
	* Cons: Requires including an additional library dependency (Lodash).
2. **JSON Clone**:
	* Pros: Lightweight and doesn't require any external dependencies.
	* Cons: Involves extra overhead of converting to and from a JSON string, which may impact performance.
3. **structuredClone**:
	* Pros: Part of the ECMAScript standard, so it's supported by all modern browsers.
	* Cons: May not be supported in older browsers or environments.

**Library Used:**

In this benchmark, Lodash is used as a dependency for the `cloneDeep` function.

**Special JS Feature/Syntax:**

The `structuredClone` function is a new feature introduced in ECMAScript 2020. It's designed to create a deep copy of an object without using any external dependencies or modifying the original object.

**Benchmark Preparation Code Explanation:**

The script preparation code defines an object `MyObject` with nested properties, including an array and a boolean. The HTML preparation code includes a link to the Lodash library for use in the benchmark.

**Individual Test Cases:**

Each test case uses a different method to create a deep copy of the original object:

1. **Lodash CloneDeep**: Uses `_.cloneDeep(MyObject)` to create a deep copy.
2. **JSON Clone**: Uses `JSON.parse(JSON.stringify(MyObject))` to create a deep copy.
3. **structuredClone**: Uses `structuredClone(MyObject)` to create a deep copy.

**Other Alternatives:**

If you need to compare other methods for creating deep copies, some alternatives could be:

* Using `Object.assign()` with the spread operator (`...`) to create a shallow copy, and then using `Object.assign()` again to create a deep copy.
* Using a custom function that recursively clones each property of the original object.
* Using a library like Immutable.js or Ramda for creating immutable copies.

However, these alternatives are not part of the benchmark being discussed.

lodash clonedeep vs json.parse(stringify()) vs structuredClone (version: 0)

Comparing performance of: `Lodash CloneDeep vs JSON Clone vs structuredClone`

Created: 2 years ago by: Guest

Go to the latest result

Lodash CloneDeep

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

lodash clonedeep vs json.parse(stringify()) vs structuredClone (version: 0)

Comparing performance of: Lodash CloneDeep vs JSON Clone vs structuredClone

Created: 2 years ago by: Guest

Go to the latest result

Lodash CloneDeep

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

Related benchmarks

Comparing performance of: `Lodash CloneDeep vs JSON Clone vs structuredClone`