Benchmark: Lodash cloneDeep VS spread operator VS Lodash clone (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 MyObject = [{
  description: 'a',
  myNumber: 123456789,
  myBoolean: true,
}, {
  description: 'a',
  myNumber: 123456789,
  myBoolean: true,
}, {
  description: 'a',
  myNumber: 123456789,
  myBoolean: true,
}];

var myCopy = null;

Tests:

Lodash cloneDeep
myCopy = _.cloneDeep(MyObject);
Spread operator
myCopy = [...MyObject];
Lodash clone
myCopy = _.clone(MyObject, true);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lodash cloneDeep
Spread operator
Lodash clone

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.

**Benchmark Explanation**

The provided JSON represents a JavaScript microbenchmark created using MeasureThat.net. The benchmark compares the performance of three different approaches to create a deep copy of an array of objects:

1. **Spread Operator**: Using the spread operator (`...`) to create a new array with the same elements.
2. **Lodash `cloneDeep`**: Using Lodash's `cloneDeep` function to create a deep copy of the original array.
3. **Lodash `clone` (with options)**: Using Lodash's `clone` function with the `true` option to create a shallow copy, which is then further processed by the `Array.prototype.slice()` method.

**Comparison of Options**

*   **Spread Operator**: This approach creates a new array with the same elements. It is a concise and modern way to achieve this in JavaScript. However, it can be slower than other approaches for large arrays due to the overhead of creating a new array.
*   **Lodash `cloneDeep`**: This approach uses a dedicated library function to create a deep copy of the original array. It is often considered the most reliable and efficient way to achieve this in JavaScript. However, it requires an additional dependency (the Lodash library).
*   **Lodash `clone` (with options)**: This approach uses Lodash's `clone` function with the `true` option to create a shallow copy. The result is then further processed by `Array.prototype.slice()` method to achieve a deep copy. While this approach can be faster than using `cloneDeep`, it has additional overhead due to the use of `slice()`.
*   **Pros and Cons**

*   **Spread Operator**: Pros - concise, modern, cons - potential performance issues for large arrays.
    *   **Lodash `cloneDeep`**: Pros - reliable, efficient, cons - requires an additional dependency (Lodash).
    *   **Lodash `clone` (with options)**: Pros - can be faster than using `cloneDeep`, cons - has additional overhead due to use of `slice()`.

**Library and Syntax**

*   **Lodash**: Lodash is a popular JavaScript utility library that provides a wide range of functions for tasks such as array manipulation, object creation, and more. In this benchmark, the `cloneDeep` function is used to create a deep copy of an array.
*   **Spread Operator**: This operator was introduced in ECMAScript 2018 (ES10) and is a shorthand way to create a new array by spreading elements from an existing array.

**Other Alternatives**

*   **Object.assign()**: Another approach to achieve a deep copy of an object is using `Object.assign()` method, like this: `var myCopy = Object.assign({}, MyObject);`. However, this approach may not work as expected for arrays or objects with nested structures.
*   **Array.prototype.slice()**: As mentioned earlier, the Lodash `clone` function uses `Array.prototype.slice()` to create a shallow copy. While this is an efficient way to achieve a deep copy, it requires additional processing steps.
*   **For...of loop**: Another alternative approach to achieve a deep copy of an array is using a `for...of` loop and manually creating a new array with the same elements.

In conclusion, while there are several approaches to create a deep copy of an array in JavaScript, Lodash's `cloneDeep` function remains one of the most reliable and efficient options. However, for those interested in exploring alternative solutions or optimizing performance, other options such as the spread operator, Object.assign(), Array.prototype.slice(), and for...of loop can be considered.

Related benchmarks:

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

Comparing performance of: Lodash cloneDeep vs Spread operator vs Lodash clone

Created: 3 years ago by: Guest

Jump to the latest result

Lodash cloneDeep

Spread operator

Lodash clone

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):