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: one year 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

Test name	Executions per second
Lodash cloneDeep	317105.0 Ops/sec
ES6 spread	4014582.2 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.

Related benchmarks:

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

Comparing performance of: Lodash cloneDeep vs ES6 spread

Created: 6 years ago by: Guest

Jump 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):