Benchmark: Lodash cloneDeep vs structuredClone on lots

HTML Preparation code:

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

Script Preparation code:

var myObjects = [];
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...'
  }
};
[...Array(100000)].forEach((_, i) => {
  myObjects.push(structuredClone(MyObject));
});

var myCopy = null;

Tests:

Lodash cloneDeep
myCopy = _.cloneDeep(myObjects);
Native structuredClone
myCopy = structuredClone(myObjects);

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.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Measuring the performance of two different approaches to create a deep copy of an object: one using Lodash's `cloneDeep` function and the other using the native `structuredClone` API.

The provided benchmark tests how these two methods compare when cloning a large array of objects with complex data structures, including arrays and objects themselves. The test creates 100,000 identical copies of a base object using both methods and measures which approach is faster.

**Lodash's `cloneDeep` function**

Lodash's `cloneDeep` function is used to create a deep copy of an object or array. It recursively traverses the original data structure, creating new copies of each element, including arrays and objects. This process can be slower than native methods, especially for large datasets.

Pros:

1. **Flexibility**: Lodash provides a robust set of utility functions that can be used in conjunction with `cloneDeep` to create more complex copies.
2. **Error handling**: `cloneDeep` can handle circular references and other edge cases, making it a reliable choice.

Cons:

1. **Performance overhead**: Compared to native methods, `cloneDeep` may introduce additional processing time due to its recursive nature.
2. **Size**: Lodash is an external library that needs to be included in the project, adding size to the bundle.

**Native `structuredClone` API**

The native `structuredClone` API was introduced in JavaScript 2021 (ES2021) as a way to create deep copies of objects and arrays without the need for libraries. It works by serializing the original data structure into a binary format, which can then be deserialized to create a new copy.

Pros:

1. **Performance**: `structuredClone` is likely to be faster than Lodash's `cloneDeep`, especially for large datasets.
2. **Size**: `structuredClone` does not require any external libraries or dependencies.
3. **Efficiency**: It can handle circular references and other complex data structures more efficiently.

Cons:

1. **Browser support**: `structuredClone` is only supported in modern browsers, including Chrome 114 (as shown in the benchmark results). Older browsers may not have this feature.
2. **Limited functionality**: While `structuredClone` can create deep copies of objects and arrays, it does not provide additional utility functions like Lodash's.

**Other alternatives**

1. **JSON.parse() + JSON.stringify()**: This method involves serializing the original data structure to a JSON string, which can then be deserialized to create a new copy. While this approach is simple, it may be slower and less efficient than `structuredClone`.
2. **Array.prototype.slice() + Array.prototype.concat()**: This approach involves creating a shallow copy of an array using `slice()` and then recursively creating copies of nested arrays using `concat()`. However, it can lead to infinite loops if the input data contains circular references.

In summary, the native `structuredClone` API offers a fast and efficient way to create deep copies of objects and arrays without external libraries. Lodash's `cloneDeep`, on the other hand, provides flexibility but may introduce additional processing time due to its recursive nature.

Related benchmarks:

Lodash cloneDeep vs structuredClone on lots (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.2:3b, generated one year ago):