Benchmark: Lodash CloneDeep vs Native spread

HTML Preparation code:

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.4/lodash.min.js"></script>

Script Preparation code:

var arr = [
  {
    "id": 52
  },
  {
    "id": 76
  },
  {
    "id": 13
  },
  {
    "id": 96
  },
  {
    "id": 27
  },
  {
    "id": 8
  },
  {
    "id": 23
  },
  {
    "id": 63
  },
  {
    "id": 25
  }
]

Tests:

Native
arr.map(elem => ({ ...elem, className: 'pizza' }))
Lodash.js cloneDeep
_.cloneDeep(arr).map(elem => { elem.className = 'pizza'; return elem; })

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Native
Lodash.js cloneDeep

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1.2 Safari/605.1.15

Browser/OS: Safari 13 on Mac OS X 10.15.6

View result in a separate tab

Test name	Executions per second
Native	477461.3 Ops/sec
Lodash.js cloneDeep	192071.4 Ops/sec

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

LLMs can make mistakes. Check important info.

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

**Benchmark Overview**

The benchmark compares two approaches to create a new array with modified elements: using native JavaScript features (`map` function) versus using the `cloneDeep` function from the Lodash library. The goal is to measure which approach is faster for creating this specific type of dataset.

**Native Approach**

In the Native approach, the `map` function is used to create a new array with modified elements:
```javascript
arr.map(elem => ({ ...elem, className: 'pizza' }))
```
This code uses the spread operator (`...`) to create a shallow copy of each element in the original array, and then adds a `className` property to each resulting object.

**Lodash.js CloneDeep Approach**

In the Lodash.js CloneDeep approach, the `cloneDeep` function from the Lodash library is used to create a deep copy of the original array:
```javascript
_.cloneDeep(arr).map(elem => ({ elem.className = 'pizza'; return elem; }))
```
This code uses `cloneDeep` to create a deep copy of the original array, and then applies the same transformation as in the Native approach.

**Options Compared**

The two approaches are compared in terms of their performance, measured by the number of executions per second. The goal is to determine which approach is faster for creating this specific type of dataset.

**Pros and Cons**

* **Native Approach**
	+ Pros:
		- No external dependencies (no Lodash library)
		- May be more efficient since it doesn't create an extra copy of the array
	+ Cons:
		- Requires modern JavaScript features (e.g., spread operator, arrow functions)
		- May not work in older browsers or environments that don't support these features
* **Lodash.js CloneDeep Approach**
	+ Pros:
		- Works consistently across different browsers and environments
		- Uses a well-known and widely-used library for deep copying arrays
	+ Cons:
		- Requires an external dependency (the Lodash library)
		- May be slower due to the overhead of cloning the array

**Library: Lodash**

The `cloneDeep` function from the Lodash library is used to create a deep copy of the original array. The purpose of this function is to recursively clone all nested properties and arrays, ensuring that the cloned object has the same structure and contents as the original.

**Special JS Feature/Syntax**

No special JavaScript features or syntax are used in either approach. However, it's worth noting that the Native approach requires modern JavaScript features like arrow functions, spread operator, and template literals (`\r\n`).

**Alternatives**

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

* Using the `JSON.parse(JSON.stringify(arr))` method
* Implementing a custom deep copying function using recursion or iteration
* Using other libraries that provide deep copying functionality (e.g., Immutable.js, MapReduce)

Keep in mind that these alternatives may have their own trade-offs and performance characteristics, which may not be identical to the Native or Lodash.js CloneDeep approaches.

Related benchmarks:

Lodash CloneDeep vs Native spread (version: 0)

Comparing performance of: Native vs Lodash.js cloneDeep

Created: 4 years ago by: Guest

Jump to the latest result

Native

Lodash.js cloneDeep

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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