Benchmark: Lodash clone VS Lodash cloneDeep VS Spread operator with array of objects

HTML Preparation code:

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

Script Preparation code:

var obj = {
  description: 'a',
  myNumber: 123456789,
  myBoolean: true,
};

var array = [obj, obj, obj];

Tests:

Lodash cloneDeep
result = _.cloneDeep(array);
Spread operator
result = [...array];

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: one year ago)

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

Browser/OS: Chrome 134 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Lodash cloneDeep	1543088.0 Ops/sec
Spread operator	9742727.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring the performance of JavaScript code is essential to optimize and improve application performance. In this benchmark, we're comparing three approaches for creating a deep copy of an array of objects using Lodash or the spread operator.

**Benchmark Overview**

The benchmark tests two individual test cases:

1.  **Lodash cloneDeep**: Creates a deep copy of the input array using Lodash's `cloneDeep` function.
2.  **Spread operator with array of objects**: Creates a shallow copy of the input array by spreading its elements into a new array.

**Library Used: Lodash**

The spread operator uses the `lodash` library, which provides various utility functions for JavaScript development, including array manipulation and cloning. The specific version used in this benchmark is 4.17.5.

**Options Compared**

Here's a summary of the options compared:

*   **Lodash cloneDeep**: Creates a deep copy of the input array using Lodash's `cloneDeep` function.
    *   **Pros:** Produces an accurate, deep copy of the original array, preserving all nested objects and arrays. This approach ensures that any changes made to the cloned object do not affect the original.
    *   **Cons:** May be slower than shallow copying due to the overhead of recursively cloning nested objects. However, this is usually negligible in most cases where the data does not contain deeply nested structures.
*   **Spread operator with array of objects**: Creates a shallow copy of the input array by spreading its elements into a new array.
    *   **Pros:** Generally faster than deep copying because it avoids recursive cloning and only copies the top-level properties. This approach is suitable for most cases where data does not contain deeply nested structures or complex object relationships.
    *   **Cons:** Does not preserve nested objects or arrays, which means any changes made to the cloned array will affect the original.

**Special JavaScript Features**

This benchmark uses:

*   The spread operator (`...`) in JavaScript is called the "spread syntax" and allows for creating new arrays from existing ones by copying its elements into a new array.
*   **Lodash's cloneDeep function**: Lodash provides a `cloneDeep` function to create deep copies of objects, preserving their entire structure and nested content.

**Other Alternatives**

If you prefer not to use the spread operator or Lodash for creating copies, there are alternative methods:

1.  **Array.prototype.slice() with Object.assign():** Create a shallow copy by spreading an array's elements into a new array using `Object.assign()` to populate it.
2.  **Array.prototype.map() and Object.assign():** Use `map()` to create a new array and then use `Object.assign()` to populate the array from the original data.

In summary, Lodash's `cloneDeep` provides a safe way for deep copying objects, while the spread operator offers an efficient solution for shallow copying arrays. Choosing between these options depends on the specific requirements of your project and whether you need to preserve nested structures or simply create copies without affecting the original data.

Related benchmarks:

Lodash clone VS Lodash cloneDeep VS Spread operator with array of objects (version: 0)

Comparing performance of: Lodash cloneDeep vs Spread operator

Created: 4 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

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