Benchmark: Lodash cloneDeep vs structuredClone vs JSON Parse vs primitive

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));
primitive
myCopy = { description: MyObject.description, myNumber: MyObject.myNumber, myBoolean: MyObject.myBoolean, jayson: { stringify: MyObject.jayson.stringify, parse: MyObject.jayson.parse } };

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lodash cloneDeep
Native structuredClone
JSON Parse
primitive

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/111.0

Browser/OS: Firefox 111 on Windows

View result in a separate tab

Test name	Executions per second
Lodash cloneDeep	1143816.1 Ops/sec
Native structuredClone	574565.4 Ops/sec
JSON Parse	526083.9 Ops/sec
primitive	86523360.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the details of this benchmark.

**What is being tested?**

The benchmark measures the performance of different methods for creating a deep copy of an object in JavaScript:

1. `structuredClone`: A native method introduced in ECMAScript 2020 that creates a deep copy of an object.
2. `JSON.parse(JSON.stringify())`: A common approach to create a deep copy of an object by parsing the original object as a JSON string and then creating a new object from the parsed JSON string.
3. Lodash's `cloneDeep` function: A popular utility library that provides a deep cloning function.

**Options compared**

The benchmark compares the performance of these three methods:

* **Structured Clone (`structuredClone`)**: Creates a deep copy of an object using a native method.
* **JSON Parse (`JSON.parse(JSON.stringify())`)**: Creates a deep copy of an object by parsing the original object as a JSON string and then creating a new object from the parsed JSON string.
* **Lodash `cloneDeep`**: Creates a deep copy of an object using Lodash's utility function.

**Pros and Cons**

1. **Structured Clone (`structuredClone`)**:
	* Pros: Native implementation, likely to be fast and efficient.
	* Cons: Limited browser support (only available in ECMAScript 2020+ compliant browsers). May not work with older browsers or environments that don't support it.
2. **JSON Parse (`JSON.parse(JSON.stringify())`)**:
	* Pros: Widely supported across modern browsers, works even on older versions of Internet Explorer.
	* Cons: Slower than native implementations like `structuredClone`, as it involves additional parsing and stringification steps.
3. **Lodash `cloneDeep`**:
	* Pros: Fast and efficient, widely used and well-maintained library.
	* Cons: Requires an external dependency (the Lodash library), may not be suitable for all environments or use cases.

**Library usage**

In this benchmark, the Lodash library is used to implement the `cloneDeep` function. This function is a popular utility that provides a deep cloning function for objects.

**Special JS feature or syntax**

None of the methods in this benchmark rely on special JavaScript features or syntax.

**Other alternatives**

If you're interested in exploring alternative approaches, here are a few:

* **Recursion**: You can implement a recursive function to clone an object by iterating through its properties and creating new copies for each one.
* **Serialization**: Another approach is to serialize the entire object as a JSON string and then deserialization it into a new object.

Keep in mind that these alternatives may not be as efficient or convenient as the methods compared in this benchmark.

Related benchmarks:

Lodash cloneDeep vs structuredClone vs JSON Parse vs primitive (version: 0)

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

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

Created: one year ago by: Guest

Jump to the latest result

Lodash cloneDeep

Native structuredClone

JSON Parse

primitive

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