Benchmark: Lodash cloneDeep VS spread operator with children

HTML Preparation code:

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

Script Preparation code:

var MyObject = {
  description: 'a',
  myNumber: 123456789,
  myBoolean: true,
  enfants: [
    {id: 1, test: {id:2, a: 'chaine', child: {id:3}}},
    {id: 2, test: {id:3, a: 'chaine', child: {id:3}}}
    ]
};

var myCopy = null;

Tests:

Lodash cloneDeep
myCopy = _.cloneDeep(MyObject);
Spread operator
myCopy = {...MyObject};

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:

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

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

Browser/OS: Chrome 142 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Lodash cloneDeep	598282.8 Ops/sec
Spread operator	12299664.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

LLMs can make mistakes. Check important info.

This benchmark compares two methods of creating a deep copy of an object in JavaScript: using the Lodash library's `cloneDeep` function and using the spread operator.

### Options Compared

1. **Lodash `cloneDeep`**:
   - **Definition**: `myCopy = _.cloneDeep(MyObject);`
   - **Library**: Lodash is a popular JavaScript utility library that provides functions for common programming tasks, including data manipulation, such as deep cloning of objects. The `cloneDeep` function creates a deep copy of an object, meaning it recursively copies all properties, including nested objects and arrays.

2. **Spread Operator**:
   - **Definition**: `myCopy = {...MyObject};`
   - **Syntax**: The spread operator (`...`) is a built-in JavaScript feature introduced in ES6 (ECMAScript 2015) that allows the shallow copying of objects and arrays. In this context, it is used to create a new object with the same properties as `MyObject`.

### Performance Results

From the benchmark results, there is a significant difference in performance between the two methods:

- **Spread Operator**: 8,765,454 executions per second
- **Lodash `cloneDeep`**: 337,552.84 executions per second

### Pros and Cons

#### Lodash `cloneDeep`
- **Pros**:
  - Thoroughly handles deep cloning of nested objects, ensuring that all levels of an object are copied.
  - Can deal with complex data types, such as arrays, dates, and custom objects.

- **Cons**:
  - Significantly slower performance compared to native JavaScript methods in this benchmark.
  - Requires an additional library, which can increase dependency size and complexity.

#### Spread Operator
- **Pros**:
  - Much faster for simple shallow cloning tasks, especially for plain objects.
  - No external library is needed, as it is part of the standard JavaScript language.
  - Results in less code and better readability for simple object cloning.

- **Cons**:
  - Only performs a shallow copy. If `MyObject` contains nested objects, the references to those nested objects are copied as is, leading to potential issues if modifications are made to the deep properties.

### Considerations

- **Choice of Method**: Developers should choose between using `cloneDeep` or the spread operator based on their specific needs:
  - For deep cloning of complex structures where nested objects are involved, use Lodash `cloneDeep`.
  - For performance-sensitive applications dealing with simple objects, the spread operator is more efficient.

- **Alternatives**: Other alternatives for deep cloning in JavaScript include:
  - **JSON Serialization Method**: `myCopy = JSON.parse(JSON.stringify(MyObject));` This method is simple and works for most plain objects but fails with functions, `undefined`, and other special data types (like `Date`).
  - **Recursive Function**: Custom implementations using recursion can also be created to handle specific cloning requirements but may require more effort to ensure robustness.

Overall, the benchmark clearly highlights the performance trade-offs between using a dedicated library versus the native language features available in JavaScript, enabling developers to make informed decisions in their coding practices.

Related benchmarks:

Lodash cloneDeep VS spread operator with children (version: 1)

Comparing performance of: Lodash cloneDeep vs Spread operator

Created: one year ago by: Guest

Jump to the latest result

Lodash cloneDeep

Spread operator

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):