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

Autogenerated LLM Summary (model llama3.2:3b, generated one month 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.

Latest run results:

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

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

Browser/OS: Chrome 127 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Lodash cloneDeep	756969.0 Ops/sec
structuredClone	574995.8 Ops/sec
Spread operator	17653610.0 Ops/sec

Related benchmarks:

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

Comparing performance of: Lodash cloneDeep vs structuredClone vs Spread operator

Created: 2 years ago by: Guest

Jump to the latest result

Lodash cloneDeep

structuredClone

Spread operator

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