Benchmark: Lodash cloneDeep vs JSON parse

HTML Preparation code:

<script src="https://cdn.jsdelivr.net/npm/lodash@1.3.1/lodash.min.js"></script>

Script Preparation code:

var items = [ ...Array(10000).keys() ].map( i => { return { bar: "foo" } });

Tests:

Lodash cloneDeep
_.cloneDeep(items);
JSON parse/stringify
JSON.parse(JSON.stringify(items));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lodash cloneDeep
JSON parse/stringify

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 118 on Windows

View result in a separate tab

Test name	Executions per second
Lodash cloneDeep	13.3 Ops/sec
JSON parse/stringify	720.5 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 provided benchmark.

**Benchmark Definition**

The benchmark is designed to compare two approaches for deep cloning an array of objects: `_.cloneDeep` from Lodash and `JSON.parse(JSON.stringify(items))`.

**Options Compared**

1. **Lodash cloneDeep**: This method uses a custom implementation of deep cloning, which recursively creates new objects and arrays to avoid reference leaks.
2. **JSON parse/stringify**: This approach serializes the input object using `JSON.stringify`, which converts it to a string, and then parses that string back into an object using `JSON.parse`. This can lead to issues with circular references.

**Pros and Cons**

* Lodash cloneDeep:
	+ Pros: Avoids reference leaks, provides more control over the cloning process.
	+ Cons: May be slower due to its custom implementation and potential overhead from creating new objects and arrays.
* JSON parse/stringify:
	+ Pros: Fast and lightweight, as it leverages built-in JavaScript functions.
	+ Cons: Can lead to issues with circular references, which can cause errors or unexpected behavior.

**Library**

The benchmark uses the Lodash library, specifically version 1.3.1, for its `cloneDeep` function. Lodash is a popular utility library that provides a set of helper functions for common tasks, such as array manipulation, object creation, and more.

**Special JS Feature or Syntax**

There isn't any specific JavaScript feature or syntax mentioned in the benchmark definition or individual test cases. However, it's worth noting that some older browsers may not support modern JavaScript features like `let` and `const`, which are used extensively in Lodash code.

**Other Alternatives**

If you want to explore alternative approaches for deep cloning objects, here are a few options:

1. **`.slice()` method**: You can use the `.slice()` method on arrays or the `Object.assign()` method on objects to create shallow clones.
2. **`JSON.parse(JSON.stringify())` without Lodash**: Without using Lodash, you can still achieve deep cloning by serializing the object and then parsing it back into an object, as shown in the benchmark definition.
3. **Custom implementation**: You can write your own custom function for deep cloning objects, which may provide more control over the process but also adds complexity.

Keep in mind that each approach has its trade-offs, and the best choice depends on your specific use case and performance requirements.

Related benchmarks:

Lodash cloneDeep vs JSON parse (version: 0)

Comparison of deep cloning 10,000 objects in an array with Lodash cloneDeep vs JSON parse and stringify.

Comparing performance of: Lodash cloneDeep vs JSON parse/stringify

Created: one year ago by: Guest

Jump to the latest result

Lodash cloneDeep

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