Benchmark: Lodash cloneDeep 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,
  profile: {
	name: 'name',
      description: 'a',
      myNumber: 123456789,
      myBoolean: true,
    id: 1,
    more : {
      some: 'text',
      description: 'a',
      myNumber: 123456789,
      myBoolean: true,
    },
  },
};

var myCopy = null;

Tests:

Lodash cloneDeep
myCopy = _.cloneDeep(MyObject);
Spread operator
myCopy = {...MyObject, profile: { ...MyObject.profile, more: { ...MyObject.profile.more }}};

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 month ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:151.0) Gecko/20100101 Firefox/151.0

Browser/OS: Firefox 151 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
Lodash cloneDeep	1497733.6 Ops/sec
Spread operator	6913335.5 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, compared, and their pros/cons.

**Benchmark Definition**

The provided JSON represents a benchmark comparison between two approaches:

1. **Lodash cloneDeep**: This approach uses the `cloneDeep` function from the Lodash library to create a deep copy of the `MyObject` object.
2. **Spread operator**: This approach uses the spread operator (`...`) to create a shallow copy of the `MyObject` object, and then recursively creates new objects for each nested property using the spread operator.

**What is being tested**

The benchmark tests how fast these two approaches are in creating a deep copy of the `MyObject` object, which has multiple nested properties (e.g., `profile`, `myNumber`, `myBoolean`, etc.).

**Options compared**

Two options are compared:

1. **Lodash cloneDeep**: This approach uses a library function to create a deep copy of the object.
2. **Spread operator**: This approach uses a built-in JavaScript feature to create a shallow copy of the object and then recursively creates new objects for each nested property.

**Pros/Cons**

Here's a brief summary of the pros and cons of each approach:

1. **Lodash cloneDeep**
	* Pros:
		+ Robust and efficient way to create deep copies.
		+ Handles complex data structures with ease.
	* Cons:
		+ Requires an external library (Lodash).
		+ May introduce additional overhead due to the library's dependencies.
2. **Spread operator**
	* Pros:
		+ Fast and lightweight, as it leverages built-in JavaScript features.
		+ No external dependencies required.
	* Cons:
		+ Only works for shallow copies; deeper nested properties require recursive calls.
		+ May lead to performance issues if not implemented correctly.

**Library**

The `cloneDeep` function from Lodash is used in the **Lodash cloneDeep** approach. Lodash is a popular utility library for JavaScript that provides a wide range of functions for tasks like array manipulation, string formatting, and object creation (including deep cloning).

**Special JS feature**

The spread operator (`...`) is a built-in JavaScript feature introduced in ECMAScript 2018. It allows creating new objects by spreading existing ones.

In the **Spread operator** approach, the spread operator is used to create a shallow copy of the `MyObject` object, and then recursively creates new objects for each nested property using the spread operator again (e.g., `{ ...MyObject.profile, more: { ...MyObject.profile.more } }`). This recursive process can lead to performance issues if not optimized correctly.

**Other alternatives**

If you're interested in exploring alternative approaches, here are a few options:

1. **JSON.parse(JSON.stringify())**: This method creates a deep copy of an object by parsing the JSON representation of the original object and then creating a new object from it.
2. **Object.assign() with recursive calls**: You can use `Object.assign()` to create a shallow copy of an object, and then recursively call itself on nested properties using the spread operator or other means.

However, keep in mind that these alternatives may have different performance characteristics and complexity compared to the Lodash cloneDeep function and the spread operator approach.

Related benchmarks:

Lodash cloneDeep VS spread (version: 1)

Lodash cloneDeep vs Spread operator

Comparing performance of: Lodash cloneDeep vs Spread operator

Created: 5 years ago by: Registered User

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.2:3b, generated one year ago):