Benchmark: cloneDeep vs. new array

HTML Preparation code:

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

Script Preparation code:

var data = [
  {
    name: 1,
    stories: 32,
  },
  {
    name: 2,
    stories: 28,
  },
  {
    name: 3,
    stories: 30,
  },
  {
    name: 4,
    stories: 22,
  },
  {
    name: 5,
    stories: 16,
  },
  {
    name: 6,
    stories: 15,
  },
  {
    name: 7,
    stories: 12,
  },
];

Tests:

Array.from
Array.from(data);
Spread
[...data];
Lodash cloneDeep
_.cloneDeep(data);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.from
Spread
Lodash cloneDeep

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

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

Browser/OS: Chrome 119 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.from	8692985.0 Ops/sec
Spread	20691450.0 Ops/sec
Lodash cloneDeep	434190.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 test compares three approaches to create a deep copy of an array in JavaScript:

1. `Array.from(data)`
2. `[...data]` (spread operator)
3. `_.cloneDeep(data)` from the Lodash library

**Options Compared**

* **Array.from(data)**: This method creates a new array by iterating over the original array and adding each element to the new array.
* **[...data]** (spread operator): This method creates a new array by spreading the elements of the original array into a new array.
* **_.cloneDeep(data)** from Lodash library: This method creates a deep copy of the original array, recursively cloning all its nested objects and arrays.

**Pros and Cons**

* **Array.from(data)**:
	+ Pros: Simple to implement, fast execution time.
	+ Cons: Requires iteration over the original array, may not be suitable for large datasets.
* **[...data]** (spread operator):
	+ Pros: Fast execution time, concise syntax.
	+ Cons: May not work as expected with nested objects or arrays, can lead to memory issues if used with very large datasets.
* **_.cloneDeep(data)** from Lodash library:
	+ Pros: Recursively clones all nested objects and arrays, handles complex data structures.
	+ Cons: Requires an external library (Lodash), may have a higher overhead than the other two options.

**Library Used**

The `_.cloneDeep` function is part of the Lodash library. Lodash is a popular JavaScript utility library that provides various functions for tasks such as array manipulation, string manipulation, and object transformation.

**Special JS Feature or Syntax**

There are no special JS features or syntax used in this benchmark. All options rely on standard JavaScript syntax and libraries.

**Benchmark Preparation Code**

The preparation code creates an array `data` with 7 elements each containing a `name` property and a `stories` property. The Lodash library is included via the provided HTML preparation code.

**Alternatives**

Other alternatives to create a deep copy of an array in JavaScript include:

* **JSON.parse(JSON.stringify(data))**: This method creates a shallow copy of the original array, which may not be suitable for nested objects or arrays.
* **Array.prototype.map()`: This method can be used to create a new array by mapping over the elements of the original array, but it's not as efficient as `Array.from()` or the spread operator.

In summary, the benchmark compares three approaches to create a deep copy of an array in JavaScript: `Array.from(data)`, `[...data]` (spread operator), and `_.cloneDeep(data)` from Lodash library. The pros and cons of each approach are discussed, along with the considerations for choosing the right option depending on the specific use case.

Related benchmarks:

cloneDeep vs. new array (version: 0)

Comparing performance of: Array.from vs Spread vs Lodash cloneDeep

Created: 2 years ago by: Guest

Jump to the latest result

Array.from

Spread

Lodash cloneDeep

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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