Benchmark: Lodash cloneDeep vs structuredClone vs JSON.parse/JSON.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 = structuredClone(MyObject);
JSON.parse/JSON.stringify
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/JSON.stringify

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.1 Safari/605.1.15

Browser/OS: Safari 16 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Lodash cloneDeep	1675012.8 Ops/sec
Native structuredClone	698293.9 Ops/sec
JSON.parse/JSON.stringify	1305638.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the test cases and options being compared in this benchmark.

**Options being compared:**

1. **Lodash cloneDeep**: A popular JavaScript library for cloning objects, which creates a deep copy of an object by recursively iterating over its properties and creating new objects with the same structure.
2. **Native structuredClone**: A new JavaScript function introduced in ECMAScript 2020 (ES12) that allows to create a shallow or deep clone of an object. In this benchmark, only a deep clone is compared.
3. **JSON.parse/JSON.stringify**: A built-in JavaScript method for converting JavaScript objects to JSON strings and vice versa.

**Pros and Cons:**

* **Lodash cloneDeep**:
	+ Pros: Well-tested, widely used, and well-documented library. It can handle complex object structures with ease.
	+ Cons: Adds an external dependency (Lodash), which may not be ideal for small projects or those with strict dependencies.
* **Native structuredClone**: 
	+ Pros: Built-in, doesn't add any external dependencies, and is designed to be efficient.
	+ Cons: Limited support in older browsers (pre-ES12) and may have different behavior for shallow clones compared to Lodash cloneDeep.
* **JSON.parse/JSON.stringify**:
	+ Pros: Built-in, easy to use, and widely supported across browsers.
	+ Cons: Can lead to performance issues when dealing with large objects or complex structures due to string conversion overhead.

**Library:**

In the provided benchmark, Lodash is used. It's a popular utility library for JavaScript that provides various functions for tasks like cloning, mapping, reducing, and more. In this case, `_.cloneDeep` is used to create a deep copy of an object.

**Special JS feature or syntax:**

None mentioned in the benchmark definition or test cases provided.

**Other considerations:**

* The benchmark focuses on creating a deep clone of an object, which means that any nested objects or arrays within the original object will be copied recursively.
* The `structuredClone` function returns a new object with a similar structure to the original, but this might not always be identical (e.g., if the original contains mutable properties like functions or callbacks).

**Alternatives:**

If you're looking for alternative methods to create deep clones of objects, you can consider:

1. **Immutable.js**: A library that provides immutable data structures and a set of utility functions for creating deep copies.
2. **lodash-es**: Another version of Lodash optimized for ECMAScript 2015 (ES6) and later, which might be more suitable for projects targeting newer browsers.
3. **Array.prototype.slice() + Object.assign()**: A simple approach that uses `slice()` to create a shallow copy of an array or object, followed by `Object.assign()` to merge the copied values back into a new object.

Keep in mind that these alternatives may have trade-offs in terms of performance, compatibility, or usage complexity.

Related benchmarks:

Lodash cloneDeep vs structuredClone vs JSON.parse/JSON.stringify (version: 0)

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

Comparing performance of: Lodash cloneDeep vs Native structuredClone vs JSON.parse/JSON.stringify

Created: one year ago by: Guest

Jump to the latest result

Lodash cloneDeep

Native structuredClone

JSON.parse/JSON.stringify

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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