Benchmark: Lodash (4.17.11) cloneDeep vs JSON Clone vs structuredClone

HTML Preparation code:


<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/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);
Json clone
myCopy = JSON.parse(JSON.stringify(MyObject));
structuredClone
myCopy = structuredClone(MyObject);

Historical Performance Data aggregated from 9 community runs

Desktop Results:

Chrome 9 runs

Lodash cloneDeep

1.6M/s

Json clone

1.2M/s

structuredClone

433K/s

Fastest: Lodash cloneDeep (3.8x faster)

View exact numbers

✓ Lodash cloneDeep: 1,628,945 ops/sec
• Json clone: 1,215,289 ops/sec
• structuredClone: 432,838 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lodash cloneDeep
Json clone
structuredClone

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 146 on Mac OS X 10.15.7

View result in a separate tab

Json clone

2.2M/s

Lodash cloneDeep

2.2M/s

structuredClone

962K/s

View exact numbers

Test name	Executions per second
✓ Json clone	2,210,918 Ops/sec
Lodash cloneDeep	2,166,765 Ops/sec
structuredClone	962,287 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the explanation.

**Overview**

The provided JSON represents a benchmark test on MeasureThat.net, where three different approaches are compared to clone a JavaScript object: Lodash `cloneDeep`, JSON's `parse` and `stringify` methods, and the `structuredClone` function. The test creates a deep copy of an object using each approach and measures their performance.

**Options Compared**

The options being compared are:

1. **Lodash `cloneDeep`**: A library function that creates a deep copy of an object.
2. **JSON's `parse` and `stringify` methods**: Built-in JavaScript methods used to parse and convert JSON strings, respectively.
3. **`structuredClone` function**: A new function introduced in ECMAScript 2020, which creates a shallow copy of an object.

**Pros and Cons**

Here are some pros and cons for each approach:

1. **Lodash `cloneDeep`**:
	* Pros: Easy to use, efficient, and works well with complex objects.
	* Cons: Requires the Lodash library, which may be an overhead for small projects.
2. **JSON's `parse` and `stringify` methods**:
	* Pros: Built-in functions, easy to use, and does not require any additional libraries.
	* Cons: Not designed for deep object copying, can lead to unexpected results with circular references, and performance may be slower compared to dedicated cloning libraries like Lodash.
3. **`structuredClone` function**:
	* Pros: New and optimized function, designed specifically for creating shallow copies of objects, which may be more efficient than `cloneDeep`.
	* Cons: Still a relatively new feature, not widely supported by older browsers or environments.

**Library: Lodash**

Lodash is a popular JavaScript utility library that provides various functions for tasks like cloning, mapping, filtering, and more. In this benchmark, Lodash's `cloneDeep` function is used to create a deep copy of the input object.

**Special JS Feature/Syntax**

None mentioned in the provided JSON. However, it's worth noting that some newer JavaScript features, such as `Spread Operator` (e.g., `{...obj}`) or `Object.assign()` methods, might be used in certain cloning scenarios.

**Other Alternatives**

If you need to clone objects frequently, other alternatives to Lodash `cloneDeep` include:

* **Array.prototype.slice()**: Creates a shallow copy of an array.
* **JSON.parse(JSON.stringify(obj))`: Creates a deep copy of an object using JSON's `parse` and `stringify` methods (as shown in the benchmark).
* **Object.assign({}, obj)**: Creates a shallow copy of an object using the spread operator.

Keep in mind that each approach has its trade-offs, and the best choice depends on your specific use case and performance requirements.

Lodash (4.17.11) cloneDeep vs JSON Clone vs structuredClone (version: 0)

Comparing performance of: `Lodash cloneDeep vs Json clone vs structuredClone`

Created: 3 years ago by: Guest

Go to the latest result

Lodash cloneDeep

Json clone

structuredClone

Historical Performance Data aggregated from 9 community runs

Desktop Results:

Chrome 9 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Lodash (4.17.11) cloneDeep vs JSON Clone vs structuredClone (version: 0)

Comparing performance of: Lodash cloneDeep vs Json clone vs structuredClone

Created: 3 years ago by: Guest

Go to the latest result

Lodash cloneDeep

Json clone

structuredClone

Historical Performance Data aggregated from 9 community runs

Desktop Results:

Chrome 9 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `Lodash cloneDeep vs Json clone vs structuredClone`