Benchmark: cloneDeep vs spread 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 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);
Spread operator
const copy = { ...voucher };

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lodash cloneDeep
Spread operator

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

**What is being tested?**

The benchmark measures the performance difference between two approaches:

1. **Lodash `cloneDeep`**: This method creates a shallow copy of an object, but if any nested objects contain circular references (i.e., objects that reference themselves), `cloneDeep` will return an empty object instead.
2. **Spread operator (`{ ... }`)**: This operator creates a new object by taking all enumerable properties from the original object.

**Options being compared**

The two options are:

* Lodash `cloneDeep`
* Spread operator

**Pros and Cons of each approach**

1. **Lodash `cloneDeep`**:
	* Pros:
		+ Handles circular references, which can be common in complex objects.
		+ Can be more efficient for deep cloning, as it uses a recursive approach.
	* Cons:
		+ Has an overhead due to the use of Lodash library.
		+ May not be suitable for very large objects or performance-critical applications.
2. **Spread operator (`{ ... }`)**:
	* Pros:
		+ Lightweight and efficient, as it only creates a new object reference.
		+ Suitable for shallow cloning, which is often sufficient in many cases.
	* Cons:
		+ Does not handle circular references, which can lead to incorrect results.

**Library usage**

The benchmark uses Lodash library, specifically the `cloneDeep` function. The Lodash library provides a set of utility functions that can be used to simplify common programming tasks.

**Special JS features or syntax**

None mentioned in the provided code snippets.

**Other alternatives**

If you prefer not to use Lodash or the spread operator, here are some alternative approaches:

* **JSON.parse(JSON.stringify(voucher))**: This method creates a new object by recursively cloning all properties from the original object. However, it has its own limitations and may not be suitable for all cases.
* **Object.assign()**: This method creates a new object by copying all enumerable properties from the original object. It can handle shallow cloning but may not be suitable for deep cloning or circular references.

In summary, the benchmark is designed to measure the performance difference between two popular methods for creating clones of objects in JavaScript: Lodash `cloneDeep` and the spread operator (`{ ... }`). The results will help developers understand which approach is most efficient for their specific use cases.

Related benchmarks:

cloneDeep vs spread object (version: 0)

Comparing performance of: Lodash cloneDeep vs Spread operator

Created: 5 years ago by: Guest

Jump to the latest result

Lodash cloneDeep

Spread operator

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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