Benchmark: Object cloning with Lodash cloneDeep vs ES6 object 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 o = {
 a: {
   b: 1,
   c: 2,
   d: 3,
   j: {
     k: [1,2,3],
     l: [4,5,6]
   },
 },
 e: [1,2,3,4,5,6],
 f: 1,
 g: {
   h: 1,
 }
}

Tests:

Lodash cloneDeep
const a = _.cloneDeep(o)
ES6 spread
const a = { ...o, a: { ...o.a, j: { ...o.a.j, k: [...o.a.j.k] } } };

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lodash cloneDeep
ES6 spread

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36

Browser/OS: Chrome 127 on Linux

View result in a separate tab

ES6 spread

4.0M/s

Lodash cloneDeep

317K/s

View exact numbers

Test name	Executions per second
✓ ES6 spread	4,014,582 Ops/sec
Lodash cloneDeep	317,105 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 is being tested.

**Benchmark Description**

The benchmark compares two approaches to object cloning in JavaScript:

1. **ES6 spread**: This approach uses the spread operator (`...`) to clone an object. It creates a new object with the same properties as the original object, but without creating nested objects.
2. **Lodash `cloneDeep`**: This approach uses the `cloneDeep` function from the Lodash library to create a deep copy of the original object.

**Options Compared**

The benchmark compares two options:

* ES6 spread (using the spread operator)
* Lodash `cloneDeep`

**Pros and Cons of Each Approach**

1. **ES6 Spread**
	* Pros:
		+ Fast: The spread operator is optimized for performance and creates a new object without creating nested objects.
		+ Simple to use: It's easy to understand and implement, especially for simple objects.
	* Cons:
		+ Limited support: Older browsers might not support the spread operator or may have issues with it.
		+ Nested objects: If an object has deeply nested properties, this approach might not be suitable as it creates a new object without preserving the original structure.
2. **Lodash `cloneDeep`**
	* Pros:
		+ Deep copying: It can handle complex nested objects and preserves their structure.
		+ Robustness: It's designed to work with various JavaScript versions and browsers, making it more reliable for production use.
	* Cons:
		+ Slower: The `cloneDeep` function is a more complex implementation that might be slower than the ES6 spread operator.
		+ Dependencies: It requires including an external library (Lodash), which may add overhead.

**Library Used**

The benchmark uses the Lodash library, specifically the `cloneDeep` function. The purpose of this function is to create a deep copy of an object, meaning it recursively creates new objects for nested properties, preserving their structure and content.

**Special JavaScript Feature or Syntax**

There are no special features or syntaxes being used in this benchmark that would require additional explanation.

**Other Alternatives**

If you need to clone objects in JavaScript, other alternatives include:

* **`Object.assign()`**: This method can be used to create a shallow copy of an object. However, it may not work as expected for nested objects.
* **`JSON.parse(JSON.stringify())`**: This approach creates a deep copy of an object by serializing the original object to JSON and then parsing the result back into a JavaScript object.

It's worth noting that the choice of cloning method depends on your specific use case, performance requirements, and compatibility needs.

Object cloning with Lodash cloneDeep vs ES6 object spread (version: 0) Benchmark.js

Comparing performance of: `Lodash cloneDeep vs ES6 spread`

Created: 6 years ago by: Guest

Go to the latest result

Lodash cloneDeep

ES6 spread

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Object cloning with Lodash cloneDeep vs ES6 object spread (version: 0) Benchmark.js

Comparing performance of: Lodash cloneDeep vs ES6 spread

Created: 6 years ago by: Guest

Go to the latest result

Lodash cloneDeep

ES6 spread

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `Lodash cloneDeep vs ES6 spread`