Benchmark: _.cloneDeep vs structuredClone vs spread

HTML Preparation code:


<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>

Script Preparation code:

var voucher = {
    "single": false,
    "applyOverTaxes": false,
    "discountType": "1",
    "value": 100,
    "minimumAmount": 0,
    "quantity": 1,
    "suffixLength": 8,
    "code": "IF5R0AFX",
    "vertical": [],
    "allowedPaymentMethods": [],
    "allowedBanks": [],
    "types": [],
    "partners": [],
    "startDate": "2020-10-21T00:00:00.000Z",
    "endDate": "2020-10-21T00:00:00.000Z",
    "applyed": false
}

Tests:

Lodash cloneDeep
const copy = _.cloneDeep(voucher);
structuredClone
const copy = window.structuredClone(voucher);
Spread operator
const copy = { ...voucher };

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lodash cloneDeep
structuredClone
Spread operator

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 137 on Android

View result in a separate tab

Test name	Executions per second
Lodash cloneDeep	154940.3 Ops/sec
structuredClone	71664.0 Ops/sec
Spread operator	7420883.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring performance differences between various approaches to create copies of objects in JavaScript is a crucial task.

The benchmark compares three different methods:

1. **Lodash `cloneDeep`**: This method creates a deep copy of an object using the Lodash library's `cloneDeep` function. A deep copy creates a new, independent copy of the original object, including all its properties and nested objects.
2. **`structuredClone`**: This is a newer, built-in JavaScript method (introduced in ECMAScript 2020) that creates a shallow clone of an object. Unlike Lodash's `cloneDeep`, it doesn't recursively clone nested objects by default. To create a deep clone, you need to specify the `deep` option.
3. **Spread operator (`{ ...voucher }`)**: This method uses the spread operator to create a new copy of the object by copying all its own enumerable properties.

**Pros and Cons:**

* **Lodash `cloneDeep`:**
	+ Pros:
		- Recursively clones nested objects, ensuring an accurate deep copy.
		- Handles complex data structures with ease.
	+ Cons:
		- Requires an additional library (Lodash) to be included in the project.
		- May add overhead due to the library's presence and initialization.
* **`structuredClone`:**
	+ Pros:
		- Built-in method, eliminating the need for a separate library.
		- Efficient creation of shallow clones, suitable for many use cases.
	+ Cons:
		- Doesn't create deep clones by default; requires specifying the `deep` option.
		- May not handle complex data structures as well as Lodash's `cloneDeep`.
* **Spread operator (`{ ...voucher }`):**
	+ Pros:
		- Lightweight and easy to implement, as it only uses built-in JavaScript features.
		- Fast creation of shallow clones, suitable for most use cases.
	+ Cons:
		- May not work correctly with complex data structures or objects that contain functions or other non-enumerable properties.

**Library usage:**

The benchmark uses the Lodash library to provide the `cloneDeep` function. This library is a popular and widely-used utility framework for JavaScript, offering a wide range of functional programming utilities.

**Special JS features/syntax:**

There are no special JavaScript features or syntax used in this benchmark beyond what's standard in modern JavaScript (ECMAScript 2015+).

**Other alternatives:**

For deep cloning, other approaches include:

* Using `JSON.parse(JSON.stringify(voucher))`: This method serializes the object to a JSON string, then parses it back into an object. While this works for simple objects, it can lead to issues with functions, dates, and other non-serializable values.
* Implementing custom deep cloning logic using recursion or iterative methods.

For shallow cloning (i.e., using `structuredClone` or the spread operator), these approaches work well for most use cases:

* Using `Object.assign()` to create a new copy of an object's enumerable properties.

Overall, the choice of approach depends on the specific requirements and constraints of your project. Lodash's `cloneDeep` provides the most comprehensive solution for deep cloning, while `structuredClone` offers a lightweight alternative that still meets many use cases' needs. The spread operator is suitable for shallow cloning, especially when working with simple objects or when performance is critical.

Related benchmarks:

_.cloneDeep vs structuredClone vs spread (version: 0)

Comparing performance of: Lodash cloneDeep vs structuredClone vs Spread operator

Created: 3 years ago by: Guest

Jump to the latest result

Lodash cloneDeep

structuredClone

Spread operator

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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