Benchmark: mergeDeepRight vs _.cloneDeep vs structuredClone vs spread

HTML Preparation code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.29.0/ramda.min.js" integrity="sha512-5x/n+aOg68Z+O/mq3LW2pC2CvEBSgLl5aLlOJa87AlYM1K8b8qsZ7NTHLe3Hu56aS2W0rgEgVCFA3RM12IXAGw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></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:

R.mergeDeepRight
const copy = R.mergeDeepRight({}, voucher);
Lodash cloneDeep
const copy = _.cloneDeep(voucher);
structuredClone
const copy = window.structuredClone(voucher);
Spread operator
const copy = { ...voucher };
Object.assign
const copy = Object.assign({}, voucher );

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
R.mergeDeepRight
Lodash cloneDeep
structuredClone
Spread operator
Object.assign

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 117 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
R.mergeDeepRight	1912905.1 Ops/sec
Lodash cloneDeep	668788.2 Ops/sec
structuredClone	481121.3 Ops/sec
Spread operator	15957545.0 Ops/sec
Object.assign	3554948.8 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explore what's being tested.

**Benchmark Description**

The benchmark compares four different approaches to create a deep copy of an object:

1. `R.mergeDeepRight`
2. Lodash's `cloneDeep`
3. `structuredClone` (a special JavaScript feature introduced in Chrome 84)
4. The spread operator (`{ ...voucher }`)
5. `Object.assign`

**Options Compared**

Each test case compares the performance of one specific approach to create a deep copy of the `voucher` object.

* `R.mergeDeepRight`: Uses Ramda's `mergeDeepRight` function to merge the `voucher` object with an empty object.
* `Lodash cloneDeep`: Uses Lodash's `cloneDeep` function to create a deep copy of the `voucher` object.
* `structuredClone`: Uses the `structuredClone` function (a special JavaScript feature) to create a deep copy of the `voucher` object.
* Spread operator: Uses the spread operator (`{ ...voucher }`) to create a shallow copy of the `voucher` object, which is then transformed into a deep copy using another operation (not specified in the benchmark).
* `Object.assign`: Uses `Object.assign` to create a new object with copies of the `voucher` properties.

**Pros and Cons**

Here's a brief overview of each approach:

* **R.mergeDeepRight**: This function is designed for merging objects, but can also be used to create a deep copy. It has good performance, but may not be the most efficient way to create a deep copy.
* **Lodash cloneDeep**: This function is specifically designed for creating deep copies and is generally considered fast and reliable.
* **structuredClone**: Introduced in Chrome 84, this function is designed for creating exact clones of objects. It's relatively new and might have some performance overhead due to its experimental nature.
* **Spread operator`: While the spread operator can be used to create a shallow copy, transforming it into a deep copy using another operation may introduce additional overhead. This approach also relies on the underlying implementation details of JavaScript, which might not always produce the desired result.
* **Object.assign**: This function is designed for assigning properties from one object to another. While it can be used to create a new object with copies of the `voucher` properties, it may not always produce the exact same deep copy as other approaches.

**Other Considerations**

When creating a deep copy of an object, consider the following:

* **Reference types**: If your objects contain reference types (e.g., arrays or objects that are not primitive values), be aware that copying these references might not create a new, independent copy. The copied object will still reference the original object.
* **Primitive values**: When copying primitive values (e.g., numbers, strings, booleans), you can usually rely on JavaScript's internal implementation to produce the correct result.

**Alternatives**

If you're interested in exploring other approaches or alternatives, consider the following:

* Using a library like `lodash` or `ramda` for creating deep copies.
* Utilizing functional programming techniques (e.g., using `map`, `filter`, and `reduce`) to create a deep copy from scratch.
* Investigating alternative libraries or frameworks that offer built-in support for deep copying, such as React's `useMemo` or `useCallback`.

Keep in mind that the specific approach you choose will depend on your use case, performance requirements, and personal preferences.

Related benchmarks:

mergeDeepRight vs _.cloneDeep vs structuredClone vs spread (version: 1)

Comparing performance of: R.mergeDeepRight vs Lodash cloneDeep vs structuredClone vs Spread operator vs Object.assign

Created: one year ago by: Registered User

Jump to the latest result

R.mergeDeepRight

Lodash cloneDeep

structuredClone

Spread operator

Object.assign

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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