Benchmark: Lodash cloneDeep VS spread operator list

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,
}];

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: one year ago)

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

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Lodash cloneDeep	2195070.5 Ops/sec
Spread operator	11772208.0 Ops/sec

Autogenerated LLM Summary (model llama3.1:latest, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down the benchmark definition and results.

**Benchmark Definition**

The benchmark compares two methods of cloning an array in JavaScript: using Lodash's `cloneDeep` function versus using the spread operator (`[...array]`). The test case uses a sample object `MyObject`, which contains some properties (description, number, boolean).

**Individual Test Cases**

We have two test cases:

1. **Lodash cloneDeep**: This test case uses Lodash's `cloneDeep` function to create a deep copy of the `MyObject` array. The benchmark definition is `myCopy = _.cloneDeep(MyObject);`. This means that the `cloneDeep` method will recursively traverse the entire object graph, creating a new copy of every nested property.
2. **Spread operator**: This test case uses the spread operator (`[...array]`) to create a shallow copy of the `MyObject` array. The benchmark definition is `myCopy = [...MyObject];`. This means that only the top-level properties will be copied, and any nested objects will reference the original values.

**Library**

The library used in this test case is Lodash (https://lodash.com/), a popular JavaScript utility library that provides a wide range of functional programming helpers. In this specific case, we're using its `cloneDeep` function to create a deep copy of an object.

**Special JS Feature or Syntax**

In this test case, we're using the spread operator (`[...array]`) to create a shallow copy of an array. This syntax is introduced in ECMAScript 2015 (ES6) and allows you to create new arrays by spreading existing ones.

**Pros/Cons of Different Approaches**

* **Lodash cloneDeep**: Pros:
	+ Recursively traverses the entire object graph, creating a deep copy of every nested property.
	+ Handles complex object structures with ease.
	+ Well-tested and maintained by Lodash developers.
* Cons:
	+ May be slower than spread operator for shallow copies.
	+ Requires additional dependencies (Lodash library).
* **Spread Operator**: Pros:
	+ Fast and lightweight, making it suitable for large datasets or performance-critical code.
	+ Simple to use and understand.
* Cons:
	+ Creates a shallow copy of the array, not deep copying nested objects.
	+ May lead to unexpected behavior if used with complex object structures.

**Other Alternatives**

If you don't need the full features of Lodash, you can also consider using other libraries or built-in JavaScript methods for cloning arrays:

* `Array.prototype.slice()` (shallow copy)
* `JSON.parse(JSON.stringify(obj))` (deep copy, but uses JSON serialization)
* `structuredClone()` (new in ECMAScript 2022, deep clone and serialize)

Keep in mind that these alternatives may have their own trade-offs and use cases. Always choose the solution that best fits your specific needs!

Related benchmarks:

Lodash cloneDeep VS spread operator list (version: 0)

Comparing performance of: Lodash cloneDeep vs Spread operator

Created: 5 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.1:latest, generated one year ago):