Benchmark: Lodash cloneDeep vs structuredClone vs stringify & parse

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...'
  }
};

var myCopy = null;

Tests:

Lodash cloneDeep
myCopy = _.cloneDeep(MyObject);
Native structuredClone
myCopy = structuredClone(MyObject);
Stringify
myCopy = JSON.parse(JSON.stringify(MyObject))

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lodash cloneDeep
Native structuredClone
Stringify

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark measures the performance of three different approaches to create a deep copy of an object in JavaScript:

1. `Lodash cloneDeep`
2. Native `structuredClone` (introduced in ECMAScript 2020)
3. Stringify and Parse (`JSON.parse(JSON.stringify(MyObject))`)

**Options Comparison**

The three options are compared in terms of their execution speed, which is measured by the number of executions per second.

* **Lodash cloneDeep**: This option uses the `cloneDeep` function from Lodash, a popular JavaScript utility library. The function creates a deep copy of an object by recursively traversing the object's properties and creating new copies for each value.
* **Native structuredClone**: This option uses the native `structuredClone` function introduced in ECMAScript 2020. This function creates a shallow copy of an object, but it can be used to create deep copies by passing `{ "deep": true }` as the second argument. However, this approach is not explicitly mentioned in the benchmark, so we'll assume it's using the native implementation.
* **Stringify and Parse**: This option uses the `JSON.stringify()` method to serialize the object, followed by parsing the resulting string back into an object using `JSON.parse()`. This approach creates a deep copy of the object because JSON serialization automatically serializes objects recursively.

**Pros and Cons**

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

* **Lodash cloneDeep**:
	+ Pros: well-tested, widely used, and easy to use.
	+ Cons: an additional dependency on Lodash.
* **Native structuredClone**:
	+ Pros: efficient, modern implementation, and part of the ECMAScript standard.
	+ Cons: only available in ECMAScript 2020 and later versions.
* **Stringify and Parse**:
	+ Pros: no dependencies, widely supported by browsers and Node.js.
	+ Cons: can be slower than native implementations due to serialization overhead.

**Library Usage**

In the benchmark, Lodash is used as a dependency to provide the `cloneDeep` function. The Lodash library is a popular JavaScript utility library that provides a wide range of functions for tasks such as array manipulation, string formatting, and object creation.

**Special JS Feature/Syntax**

None of the benchmark test cases uses any special JavaScript features or syntax beyond what's available in ECMAScript 2020.

**Alternatives**

If you're looking for alternative approaches to deep copying objects in JavaScript, here are a few options:

* **JSON.stringify() and JSON.parse()**: While not as efficient as Lodash `cloneDeep`, this approach is still widely used and supported.
* **Object.assign() with spread operator**: This approach creates a shallow copy of an object by spreading its properties onto a new object. To create a deep copy, you can use `Object.assign()` with the spread operator multiple times or recursively traverse the object's properties.
* **Array.prototype.map() and Object.create()**: Another approach to creating a deep copy is to use `Array.prototype.map()` to clone arrays and `Object.create()` to clone objects. However, this approach may not work as expected for complex object structures.

Keep in mind that while these alternatives can be effective, they might not be as efficient or robust as the Lodash `cloneDeep` function.

Related benchmarks:

Lodash cloneDeep vs structuredClone vs stringify & parse (version: 0)

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

Comparing performance of: Lodash cloneDeep vs Native structuredClone vs Stringify

Created: 3 years ago by: Guest

Jump to the latest result

Lodash cloneDeep

Native structuredClone

Stringify

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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