Benchmark: Lodash cloneDeep vs clone vs spread

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);
Lodash clone
myCopy = _.clone(MyObject);
Spread operator
myCopy = {...MyObject};

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lodash cloneDeep
Lodash clone
Spread operator

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 26 days ago):

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

**Benchmark Definition JSON**

The provided JSON represents a benchmark test case that compares three different methods for creating a copy of an object in JavaScript: `_.cloneDeep` from Lodash, `_.clone`, and the spread operator (`...`). The benchmark aims to measure which method is the fastest.

**Script Preparation Code**

The script preparation code creates a sample object `MyObject` with properties `description`, `myNumber`, and `myBoolean`. This object will be used as the source of truth for creating copies.

```javascript
var MyObject = {
  description: 'a',
  myNumber: 123456789,
  myBoolean: true
};

var myCopy = null;
```

**Html Preparation Code**

The HTML preparation code includes a reference to the Lodash library, which will be used in the benchmark tests.

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

**Individual Test Cases**

There are three test cases:

1. **Lodash cloneDeep**: This test case uses Lodash's `cloneDeep` function to create a deep copy of `MyObject`.
2. **Lodash clone**: This test case uses Lodash's `clone` function to create a shallow copy of `MyObject`.
3. **Spread operator**: This test case uses the spread operator (`...`) to create a new object with the same properties as `MyObject`.

**Library: Lodash**

Lodash is a popular JavaScript utility library that provides a wide range of functions for working with arrays, objects, and more. The `cloneDeep` and `clone` functions are used in this benchmark to create copies of objects.

The `cloneDeep` function creates a deep copy of an object, meaning it recursively clones all nested properties. This is useful when you need to preserve the entire structure of an object.

The `clone` function creates a shallow copy of an object, meaning it only copies the top-level properties and does not recurse into nested objects. This can be faster than `cloneDeep`, but may not be suitable for all use cases.

**Special JS Feature: Rest Operator (Spread Operator)**

The spread operator (`...`) is a modern JavaScript feature introduced in ECMAScript 2015. It allows you to create a new object with the same properties as an existing object, without modifying the original.

In this benchmark, the spread operator is used to create a copy of `MyObject`. This approach can be fast and memory-efficient, but may not preserve the entire structure of the object if it contains nested objects or complex data structures.

**Pros and Cons**

Here's a brief summary of each approach:

* **Lodash cloneDeep**: Pros:
	+ Preserves the entire structure of the object.
	+ Can be useful when working with complex data structures.
	+ Provides a simple and consistent way to create deep copies.
*   Cons:
	+ Can be slower than other approaches due to recursion.
	+ May not be suitable for very large objects or performance-critical applications.

* **Lodash clone**: Pros:
	+ Faster than `cloneDeep` due to shallow copying.
	+ Suitable for most use cases that don't require deep copying.
*   Cons:
	+ Does not preserve the entire structure of the object.
	+ May not be suitable for complex data structures or performance-critical applications.

* **Spread operator**: Pros:
	+ Fast and memory-efficient.
	+ Preserves the top-level properties of the original object.
	+ Suitable for most use cases that don't require deep copying.
*   Cons:
    + Does not preserve nested objects or complex data structures.
    + May not be suitable for very large objects or performance-critical applications.

**Other Alternatives**

There are several other approaches to creating copies of objects in JavaScript, including:

1. `Object.assign()`: This method creates a shallow copy of an object by assigning the values from another object to new properties.
2. `JSON.parse(JSON.stringify(obj))`: This approach creates a deep copy of an object by serializing it as JSON and then parsing it back into an object.
3. `Array.prototype.slice.call(obj)`: This approach creates a shallow copy of an array-like object.

Each approach has its own trade-offs, and the choice ultimately depends on the specific use case and requirements.

Latest run results:

Run details: (Test run date: 23 days ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36

Browser/OS: Chrome 130 on Windows

View result in a separate tab

Test name	Executions per second
Lodash cloneDeep	1327314.2 Ops/sec
Lodash clone	1672655.5 Ops/sec
Spread operator	5995431.0 Ops/sec

Related benchmarks:

Lodash cloneDeep vs clone vs spread (version: 0)

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

Created: 4 years ago by: Guest

Jump to the latest result

Lodash cloneDeep

Lodash clone

Spread operator

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 26 days ago):