Benchmark: Lodash cloneDeep vs structuredClone vs JSON Parse (100 000 objects)

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 = [];
for (let i=0; i<100000; i++) {MyObject.push({
  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:

Run details: (Test run date: 6 months ago)

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

Browser/OS: Chrome 141 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Lodash cloneDeep	20.1 Ops/sec
Native structuredClone	18.4 Ops/sec
JSON Parse	30.8 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 provided benchmark and explain what's being tested.

**Benchmark Definition**

The benchmark is testing three approaches to create a deep copy of an object:

1. Lodash's `cloneDeep` function
2. The native `structuredClone` API (introduced in Chrome 127)
3. The `JSON.parse(JSON.stringify())` method

**Options Compared**

* Lodash's `cloneDeep`: a popular JavaScript library for functional programming, providing a way to create deep copies of objects.
* Native `structuredClone`: a new feature introduced in Chrome 127 that allows creating deep copies of complex data structures, including objects and arrays.
* `JSON.parse(JSON.stringify())`: a built-in JavaScript method that converts a value to a JSON string and then parses it back into an object. This method is not suitable for creating deep copies, as it only clones the top-level properties and does not recursively copy nested objects.

**Pros and Cons of Each Approach**

1. Lodash's `cloneDeep`:
	* Pros: widely supported, well-tested, and easy to use.
	* Cons: adds an extra dependency (Lodash), may be slower than native solutions for very large datasets.
2. Native `structuredClone`:
	* Pros: built-in, efficient, and specifically designed for creating deep copies of complex data structures.
	* Cons: requires Chrome 127 or later to work, limited support on other browsers.
3. `JSON.parse(JSON.stringify())`:
	* Pros: lightweight, widely supported, and easy to implement.
	* Cons: only creates a shallow copy (top-level properties), can be slow for large datasets.

**Library and Purpose**

Lodash's `cloneDeep` is a popular JavaScript library that provides a way to create deep copies of objects. It recursively clones all nested properties and is widely used in the industry.

**Special JS Feature or Syntax**

The native `structuredClone` API uses a new syntax called "structured clone" which was introduced in ECMAScript 2022. This feature allows creating deep copies of complex data structures, including objects and arrays, while preserving their original structure and relationships. The `structuredClone` function is only available in Chrome 127 and later versions.

**Other Alternatives**

If you don't have access to Lodash or the native `structuredClone` API, other alternatives for creating deep copies of objects include:

* Using a library like Immutable.js or DeepCopy
* Implementing your own recursive copying algorithm using JavaScript's built-in methods (e.g., `JSON.parse(JSON.stringify())`, but be aware that this method only creates a shallow copy).
* Using a third-party library like jQuery's $.extend(true, source, target) for creating deep copies of objects.

Related benchmarks:

Lodash cloneDeep vs structuredClone vs JSON Parse (100 000 objects) (version: 0)

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

Comparing performance of: Lodash cloneDeep vs Native structuredClone vs JSON Parse

Created: one year ago by: Registered User

Jump to the latest result

Lodash cloneDeep

Native structuredClone

JSON Parse

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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