Benchmark: Lodash cloneDeep vs structuredClone vs Custom Implementation

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...'
  }
};

function deepClone(x) {
  if (x === null || typeof x !== 'object') return x;
  if (Array.isArray(x)) return x.map((item) => deepClone(item));
  return Object.fromEntries(
    Object.entries(x).map(([key, value]) => [key, deepClone(value)])
  );
};

var myCopy = null;

Tests:

Lodash cloneDeep
myCopy = _.cloneDeep(MyObject);
Native structuredClone
myCopy = structuredClone(MyObject);
Custom Deep Clone
myCopy = deepClone(MyObject);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lodash cloneDeep
Native structuredClone
Custom Deep Clone

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 146 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Lodash cloneDeep	1961074.6 Ops/sec
Native structuredClone	756908.0 Ops/sec
Custom Deep Clone	2574947.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and analyze what's being tested, compared options, pros and cons of each approach, and other considerations.

**Benchmark Definition**

The benchmark measures the performance of three approaches for creating a deep copy of an object:

1. **Lodash cloneDeep**: Uses the `cloneDeep` function from the Lodash library.
2. **Native structuredClone**: Utilizes the `structuredClone` API introduced in modern JavaScript (ES2020) to create a deep copy.
3. **Custom Deep Clone**: Implements a custom function, `deepClone`, for creating a deep copy.

**Comparison**

The three approaches are being compared in terms of their performance. The benchmark prepares a sample object (`MyObject`) and then creates a deep copy of it using each approach. The test measures the number of executions per second (ExecutionsPerSecond) for each approach, which indicates how fast each method can create multiple copies.

**Options**

Here's an overview of each option:

* **Lodash cloneDeep**: Uses the `cloneDeep` function from Lodash to create a deep copy. This is a widely-used library that provides a variety of utility functions, including deep cloning.
	+ Pros:
		- Well-tested and widely adopted
		- Provides other useful utilities beyond deep cloning
	+ Cons:
		- Adds an external dependency (Lodash)
		- May not be optimized for performance compared to native implementations
* **Native structuredClone**: Utilizes the `structuredClone` API introduced in modern JavaScript (ES2020) to create a deep copy. This is a relatively new feature that provides a lightweight and efficient way to clone objects.
	+ Pros:
		- Built-in, no external dependencies required
		- Optimized for performance
	+ Cons:
		- Requires modern browsers or environments that support ES2020
* **Custom Deep Clone**: Implements a custom function (`deepClone`) for creating a deep copy. This approach requires manual implementation of the cloning logic.
	+ Pros:
		- No external dependencies required
		- Can be optimized for performance if implemented carefully
	+ Cons:
		- Requires manual implementation and testing
		- May not be as efficient or well-tested as established libraries like Lodash

**Library**

* **Lodash**: A popular utility library that provides a wide range of functions for tasks such as array manipulation, object transformation, and more. The `cloneDeep` function is one of its many utility functions.

**Special JS Feature/Syntax**

The benchmark uses the `structuredClone` API, which is a relatively new feature introduced in modern JavaScript (ES2020). This API provides a lightweight and efficient way to clone objects.

**Other Considerations**

When choosing an approach for creating deep copies, consider factors such as:

* Performance: How quickly does each method need to execute?
* Code complexity: How complex are the cloning logic implementations?
* Dependencies: Are there any external dependencies required (e.g., Lodash)?
* Browser support: Are modern browsers or environments required?

**Alternatives**

If you're looking for alternatives to these approaches, consider:

* **JSON.parse(JSON.stringify(obj))**: While not as efficient as deep copying methods, this approach can create a shallow copy of an object by serializing it as JSON and then parsing the resulting string.
* **Array.prototype.slice() + Array.prototype.map()**: This approach creates a shallow copy of an array by slicing it and mapping over the elements.

Related benchmarks:

Lodash cloneDeep vs structuredClone vs Custom Implementation (version: 0)

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

Comparing performance of: Lodash cloneDeep vs Native structuredClone vs Custom Deep Clone

Created: 2 years ago by: Guest

Jump to the latest result

Lodash cloneDeep

Native structuredClone

Custom Deep Clone

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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