Benchmark: Lodash cloneDeep vs structuredClone vs json.parse

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 = structuredClone(MyObject);
json.parse
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
json.parse

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.

Let's break down the provided JSON and benchmark code to understand what's being tested.

**Benchmark Definition**

The benchmark is designed to compare three approaches for creating a deep copy of an object:

1. **Lodash `cloneDeep`**: A popular JavaScript library that provides a function for cloning objects deeply.
2. **Native `structuredClone`**: A relatively new feature in modern browsers, introduced in Chrome 83 and Firefox 78, which allows you to create a shallow clone or deep copy of an object using the `structuredClone()` method.
3. **JSON parsing with `json.parse`**: An older approach that uses the `JSON.stringify()` method to serialize the original object and then parses the resulting string back into an object.

**Script Preparation Code**

The script preparation code defines a simple JavaScript object `MyObject` with nested properties, including an object `jayson` that contains references to its own methods (`stringify` and `parse`). This is done to test how each approach handles complex objects and cyclic references.

**Html Preparation Code**

The HTML preparation code includes a reference to the Lodash library, which will be used by the first benchmarking case.

**Individual Test Cases**

Each test case represents one of the three approaches being compared:

1. **Lodash `cloneDeep`**: This benchmark creates a deep copy of `MyObject` using Lodash's `cloneDeep()` function.
2. **Native `structuredClone`**: This benchmark uses the native `structuredClone()` method to create a deep copy of `MyObject`.
3. **JSON parsing with `json.parse`**: This benchmark creates a deep copy of `MyObject` by serializing it to a string using `JSON.stringify()`, parsing the resulting string back into an object, and then assigning it to a new variable (`myCopy`).

**Pros and Cons**

Here's a brief summary of each approach:

1. **Lodash `cloneDeep`**: Pros: widely used and well-maintained library; supports deep copying of complex objects. Cons: not native to the browser, which might impact performance in some cases.
2. **Native `structuredClone`**: Pros: provides a modern, efficient way to create deep copies of objects; supported by most modern browsers. Cons: relatively new feature, so it's essential to check compatibility before using it in production code.
3. **JSON parsing with `json.parse`**: Pros: simple and widely available; no external libraries required. Cons: can be slower than the other two approaches due to the additional stringification and parsing steps.

**Other Considerations**

* When working with complex objects, consider the impact of cyclic references on performance.
* If you're using Lodash, make sure to import it correctly (e.g., `import _ from 'lodash';`).
* The native `structuredClone()` method is not supported in older browsers; use a fallback approach if needed.

**Alternatives**

If you need alternative approaches for creating deep copies of objects, consider the following:

1. **ForIn**: You can use `for...in` loops to create a copy of an object by iterating over its properties and copying each value.
2. **Object.assign()**: This method creates a shallow copy of an object by assigning the values of one object to another. For deep copies, you'll need to use recursion or a library like Lodash.
3. **Spread operator (`...`)**: While not specifically designed for creating deep copies, the spread operator can be used in conjunction with other methods (like `Object.assign()`) to create a copy of an object.

I hope this explanation helps!

Related benchmarks:

Lodash cloneDeep vs structuredClone vs json.parse (version: 0)

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

Comparing performance of: Lodash cloneDeep vs Native structuredClone vs json.parse

Created: 3 years ago by: Guest

Jump to the latest result

Lodash cloneDeep

Native structuredClone

json.parse

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):