Benchmark: Lodash cloneDeep vs JSON.parse(JSON.stringify())

HTML Preparation code:

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

Script Preparation code:

var originalObject = {
  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 copiedObject = null;

Tests:

Lodash cloneDeep
copiedObject = _.cloneDeep(originalObject);
Native structuredClone
copiedObject = structuredClone(originalObject);
JSON.parse(JSON.stringify())
copiedObject = JSON.parse(JSON.stringify(originalObject));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lodash cloneDeep
Native structuredClone
JSON.parse(JSON.stringify())

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 133 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Lodash cloneDeep	1256382.0 Ops/sec
Native structuredClone	578351.6 Ops/sec
JSON.parse(JSON.stringify())	1113485.6 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its various components.

**Benchmark Definition**

The provided JSON represents a JavaScript microbenchmark that tests the performance of three approaches: Lodash's `cloneDeep` function, the native `structuredClone` function, and the legacy `JSON.parse(JSON.stringify())` method.

**Options Compared**

1. **Lodash cloneDeep**: This option uses the `cloneDeep` function from the Lodash library to create a deep copy of the input object.
2. **Native structuredClone**: This option uses the native `structuredClone` function, which is introduced in ECMAScript 2020 (ES2020) as a part of the Web APIs specification.
3. **JSON.parse(JSON.stringify())**: This option uses the legacy `JSON.parse(JSON.stringify())` method to create a deep copy of the input object.

**Pros and Cons**

1. **Lodash cloneDeep**:
	* Pros: Widely adopted, well-maintained library with extensive documentation and community support.
	* Cons: Adds an external dependency (Lodash), which may impact performance due to additional overhead.
2. **Native structuredClone**:
	* Pros: Part of the Web APIs specification, providing a standardized and efficient way to create deep copies.
	* Cons: Requires ECMAScript 2020 or later support in browsers and environments.
3. **JSON.parse(JSON.stringify())**:
	* Pros: Simple, lightweight, and widely supported (most modern browsers).
	* Cons: Known to have performance issues with large objects due to JSON parsing overhead.

**Library: Lodash**

Lodash is a popular JavaScript utility library that provides a comprehensive set of functions for tasks like array manipulation, object creation, and more. The `cloneDeep` function is specifically designed to create deep copies of complex objects, which makes it an attractive option for this benchmark.

**Native structuredClone Functionality**

The native `structuredClone` function is introduced in ECMAScript 2020 as a part of the Web APIs specification. It provides a standardized way to create deep copies of objects and arrays while preserving their original structure and semantics. The implementation details are specific to each browser engine, but the basic idea is to use a combination of object and array constructors to create a new, independent copy.

**Other Alternatives**

In addition to the options mentioned above, there are other approaches to creating deep copies in JavaScript:

* **For...of loop**: Using a `for...of` loop with an iterator can be used to create a deep copy by pushing each object's properties into an array and then re-iterating over that array.
* **Object.assign()** with recursion: This approach uses `Object.assign()` to merge objects, recursively cloning nested properties.
* **Array.prototype.slice().concat()**: This method creates a shallow copy of the original array by using `slice()` to create a new array and then concatenating it with `concat()`.

However, these alternatives might not be as efficient or standardized as the options mentioned above.

Keep in mind that this is just an overview, and the best approach for your specific use case may depend on factors like performance requirements, browser support, and personal preference.

Related benchmarks:

Lodash cloneDeep vs JSON.parse(JSON.stringify()) (version: 0)

Comparing performance of: Lodash cloneDeep vs Native structuredClone vs JSON.parse(JSON.stringify())

Created: 2 years ago by: Guest

Jump to the latest result

Lodash cloneDeep

Native structuredClone

JSON.parse(JSON.stringify())

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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