Benchmark: Fair Lodash deep clone vs Spread Clone

HTML Preparation code:

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

Script Preparation code:

window.obj = { foo: 'some string', bar: 'another', subObj: { hey: 'you', what: 'are you doing' } }

Tests:

Lodash deep clone
const objClone = _.cloneDeep(window.obj);
Spread
const objClone = { ...window.obj, subObj: { ...window.obj.subObj }};

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lodash deep clone
Spread

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/125.0.0.0 Safari/537.36

Browser/OS: Chrome 125 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Lodash deep clone	1309861.1 Ops/sec
Spread	5012740.0 Ops/sec

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

LLMs can make mistakes. Check important info.

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

**Benchmark Overview**

The benchmark compares two approaches to cloning an object in JavaScript:

1. **Lodash `_.cloneDeep`**: This method is part of the Lodash library, which provides a set of utility functions for functional programming. `_.cloneDeep` creates a deep clone of an object, meaning it recursively copies all properties and values from the original object.
2. **Spread Cloning (`{ ...window.obj }`)**: This approach uses the spread operator (`...`) to create a new object that includes all properties from the original `window.obj`.

**Options Compared**

The benchmark compares two options:

* Lodash `_.cloneDeep`: A library-based approach that provides a robust and efficient way to clone objects.
* Spread Cloning: A native JavaScript approach that uses the spread operator to create a shallow copy of an object.

**Pros and Cons**

**Lodash `_.cloneDeep`**

Pros:

* More robust and efficient, as it recursively clones all properties and values from the original object.
* Less prone to issues with cyclic references or undefined values.

Cons:

* Requires including the Lodash library, which may introduce additional overhead.
* May not be suitable for very large objects due to potential performance issues.

**Spread Cloning (`{ ...window.obj }`)**

Pros:

* Lightweight and easy to use, as it only requires a single line of code.
* Does not require including an external library, making it suitable for smaller projects or use cases where overhead is a concern.

Cons:

* May not work correctly with cyclic references or undefined values.
* May lead to slower performance compared to Lodash `_.cloneDeep` due to the need to manually create new objects and copy properties.

**Other Considerations**

The benchmark does not consider other approaches, such as using `Object.assign()` or `JSON.parse(JSON.stringify())`, which may also be viable options for cloning objects in JavaScript.

**Library: Lodash**

Lodash is a popular utility library for functional programming in JavaScript. It provides a wide range of functions for tasks such as array manipulation, object cloning, and more. In this benchmark, Lodash's `_.cloneDeep` function is used to create a deep clone of the `window.obj` object.

**Special JS Feature/Syntax: None**

There are no special JavaScript features or syntax used in this benchmark, making it accessible to developers with varying levels of experience with the language.

Related benchmarks:

Fair Lodash deep clone vs Spread Clone (version: 0)

Comparing performance of: Lodash deep clone vs Spread

Created: one year ago by: Guest

Jump to the latest result

Lodash deep clone

Spread

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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