Benchmark: Lodash cloneDeep vs structuredClone vs JSON.stringify (small object)

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 = {color: "#BDBDBD", x: 506, y: 230.75};

var myCopy = null;

Tests:

lodash
myCopy = _.cloneDeep(MyObject);
structedClone (native)
myCopy = structuredClone(MyObject);
JSON.parse
myCopy = JSON.parse(JSON.stringify(MyObject));

Historical Performance Data aggregated from 13 community runs

Desktop Results:

Chrome 13 runs

lodash

2.5M/s

JSON.parse

2.4M/s

structedClone (native)

833K/s

Fastest: lodash (3.0x faster)

View exact numbers

✓ lodash: 2,478,144 ops/sec
• JSON.parse: 2,434,106 ops/sec
• structedClone (native): 833,371 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
structedClone (native)
JSON.parse

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/145.0.0.0 Safari/537.36

Browser/OS: Chrome 145 on Linux

View result in a separate tab

JSON.parse

2.3M/s

lodash

2.0M/s

structedClone (native)

610K/s

View exact numbers

Test name	Executions per second
✓ JSON.parse	2,313,394 Ops/sec
lodash	1,950,015 Ops/sec
structedClone (native)	610,000 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview**

The provided benchmark measures the performance of three methods for creating a copy of an object in JavaScript: Lodash's `cloneDeep`, Mozilla's `structuredClone` (a native implementation), and `JSON.parse(JSON.stringify(obj))`. The goal is to determine which method is the fastest.

**Methods Compared**

1. **Lodash's `cloneDeep`**: This method uses a recursive approach to create a deep copy of an object, which means it also copies nested objects.
2. **Mozilla's `structuredClone` (native)**: This is a native implementation in JavaScript, introduced in ECMAScript 2022, that creates a shallow copy of an object by creating a new instance with the same value types and property names as the original object.
3. **`JSON.parse(JSON.stringify(obj))`**: This method uses JSON serialization to create a copy of an object. It serializes the object to a string using `JSON.stringify`, then deserializes it back into an object using `JSON.parse`.

**Pros and Cons**

* **Lodash's `cloneDeep`**:
	+ Pros: Recursively creates deep copies, handles complex objects with nested objects.
	+ Cons: Can be slower due to the recursive approach and potential overhead of cloning entire objects.
* **Mozilla's `structuredClone` (native)**:
	+ Pros: Fast, efficient, and optimized for modern JavaScript environments.
	+ Cons: Only creates shallow copies, which may not be suitable for all use cases.
* **`JSON.parse(JSON.stringify(obj))`**:
	+ Pros: Simple, lightweight, and widely supported.
	+ Cons: Can create unexpected behavior if the object contains cyclic references or certain primitive values (e.g., `NaN`, `Infinity`).

**Library and Purpose**

In this benchmark, Lodash is a popular JavaScript utility library that provides various functions for tasks like array manipulation, string manipulation, and more. The `cloneDeep` function is part of Lodash's deep object manipulation module.

**Special JS Features or Syntax**

There are no special JS features or syntax used in these benchmarks. They focus on the performance comparison of three distinct methods for creating object copies.

**Other Alternatives**

If you need to create a copy of an object, other alternatives include:

* `Object.assign()`: Creates a shallow copy of an object by copying all own enumerable properties.
* `Array.prototype.slice()` or `Array.prototype.reduce()`: Can be used to create a shallow copy of an array (or an object that is converted to an array).
* **Libraries like Immutable.js**: Provides immutable data structures and methods for creating copies.

Keep in mind that the choice of method depends on your specific use case, performance requirements, and personal preference.

Lodash cloneDeep vs structuredClone vs JSON.stringify (small object) (version: 0)

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

Comparing performance of: `lodash vs structedClone (native) vs JSON.parse`

Created: 3 years ago by: Guest

Go to the latest result

lodash

structedClone (native)

JSON.parse

Historical Performance Data aggregated from 13 community runs

Desktop Results:

Chrome 13 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 cloneDeep vs structuredClone vs JSON.stringify (small object) (version: 0)

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

Comparing performance of: lodash vs structedClone (native) vs JSON.parse

Created: 3 years ago by: Guest

Go to the latest result

lodash

structedClone (native)

JSON.parse

Historical Performance Data aggregated from 13 community runs

Desktop Results:

Chrome 13 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 vs structedClone (native) vs JSON.parse`