Benchmark: Lodash cloneDeep vs json.parse+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 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 = 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

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.1:latest, generated one year ago):

LLMs can make mistakes. Check important info.

Let's dive into the details of this benchmark.

**What is being tested?**

The benchmark is comparing two different approaches to create a deep copy of an object:

1. Using the `_.cloneDeep()` function from Lodash, a popular JavaScript utility library.
2. Using a combination of `JSON.stringify()` and `JSON.parse()` methods (also known as "native structuredClone").

**What options are compared?**

In this benchmark, we're comparing two different cloning approaches:

* **Lodash cloneDeep**: This uses the `_.cloneDeep()` function from Lodash to create a deep copy of the input object.
* **Native structuredClone**: This approach uses the built-in `JSON.stringify()` method to convert the object into a JSON string and then parses it back using `JSON.parse()`. This is equivalent to the new "structuredClone" API available in modern browsers.

**Pros/Cons of each approach:**

1. **Lodash cloneDeep**:
	* Pros:
		+ Fast and efficient.
		+ Handles complex object structures (e.g., nested objects, arrays).
		+ Widely supported by older browsers (via Lodash's polyfills).
	* Cons:
		+ Requires including an external library (Lodash) in your project.
2. **Native structuredClone**:
	* Pros:
		+ Built-in support in modern browsers (since ES2019 specification).
		+ No need to include additional libraries or dependencies.
	* Cons:
		+ May be slower than Lodash cloneDeep for complex object structures.
		+ Not supported in older browsers.

**Other considerations:**

* **Library usage**: The benchmark uses Lodash's `_.cloneDeep()` function. If you're not familiar with Lodash, it's a popular utility library that provides various helper functions for tasks like data manipulation and string operations.
* **JavaScript feature or syntax**: This benchmark doesn't use any special JavaScript features or syntax beyond what's described above.

**Alternatives:**

If you don't want to use Lodash or the native structuredClone approach, other alternatives include:

1. Using a custom cloning function (e.g., recursive object copying).
2. Utilizing another library like jQuery or a dedicated cloning library.
3. Implementing your own data structure-specific cloning logic.

Keep in mind that these alternatives may have trade-offs in terms of performance, complexity, and compatibility with different browsers and environments.

Related benchmarks:

Lodash cloneDeep vs json.parse+stringify (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

No previous run results

Autogenerated LLM Summary (model llama3.1:latest, generated one year ago):