Benchmark: Lodash cloneDeep VS spread operator vs structured clone on complex object

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 = {
  "name": "John Doe",
  "age": 30,
  "isStudent": false,
  "address": {
    "street": "123 Main St",
    "city": "Anytown",
    "zipcode": "12345"
  },
  "contacts": [
    {
      "type": "email",
      "value": "john.doe@example.com"
    },
    {
      "type": "phone",
      "value": "+1 123-456-7890"
    }
  ],
  "skills": {
    "programming": ["JavaScript", "Python", "Java"],
    "design": ["Photoshop", "Illustrator"],
    "languages": {
      "spoken": ["English", "Spanish"],
      "written": ["English", "French"]
    }
  },
  "isActive": true,
  "projects": [
    {
      "name": "Project A",
      "status": "completed",
      "team": ["Alice", "Bob"]
    },
    {
      "name": "Project B",
      "status": "in progress",
      "team": ["Charlie", "David"]
    }
  ]
};

var myCopy = null;

Tests:

Lodash cloneDeep
myCopy = _.cloneDeep(MyObject);
Spread operator
myCopy = {...MyObject};
structuredClone
myCopy = structuredClone(MyObject);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lodash cloneDeep
Spread operator
structuredClone

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 months ago)

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 18_7 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) FxiOS/143 Mobile/15E148 Version/17.7

Browser/OS: Mobile Safari 17 on iOS 18.7

View result in a separate tab

Test name	Executions per second
Lodash cloneDeep	154242.9 Ops/sec
Spread operator	17105452.0 Ops/sec
structuredClone	69633.2 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks and explore what's being tested in this benchmark.

**Benchmark Overview**

The benchmark, named "Lodash cloneDeep VS spread operator vs structured clone on complex object", is designed to compare the performance of three different methods for cloning a complex JavaScript object:

1. Lodash `cloneDeep` method
2. Spread operator (`...`)
3. `structuredClone` function (introduced in ECMAScript 2020)

**Benchmark Preparation Code**

The benchmark preparation code provides an example object `MyObject`, which contains nested objects, arrays, and primitive values. The script also defines a variable `myCopy` that will be used to store the cloned copy of the original object.

**Individual Test Cases**

There are three test cases:

1. **Lodash cloneDeep**
The benchmark definition is set to use the Lodash `cloneDeep` method to create a deep copy of the `MyObject`. This method is designed to recursively clone all properties and values within the object.
2. **Spread operator**
The benchmark definition is set to use the spread operator (`...`) to create a shallow copy of the `MyObject`. The spread operator only copies the top-level properties and does not recursively clone nested objects or arrays.
3. **structuredClone**
The benchmark definition is set to use the `structuredClone` function, which is designed to create an exact binary representation of the original object, including all its properties and values.

**Pros and Cons**

* **Lodash cloneDeep**:
	+ Pros: Recursively clones all properties and values within the object.
	+ Cons: May be slower due to the recursive cloning process.
* **Spread operator**:
	+ Pros: Fast and simple way to create a shallow copy of an object.
	+ Cons: Does not recursively clone nested objects or arrays, which may lead to unexpected behavior in some cases.
* **structuredClone**:
	+ Pros: Creates an exact binary representation of the original object, including all its properties and values.
	+ Cons: May be slower due to the need to serialize and deserialize the object.

**Library - Lodash**

Lodash is a popular JavaScript utility library that provides a wide range of functions for tasks such as array manipulation, string manipulation, and more. The `cloneDeep` method is part of this library and is specifically designed for creating deep copies of objects.

**Special JS Feature/Syntax**

None mentioned in this benchmark.

**Alternatives**

Other alternatives to the spread operator include:

* Using the `Object.assign()` method to create a shallow copy of an object.
* Using the `JSON.parse(JSON.stringify(obj))` method to create a deep copy of an object, although this method can be slower and less efficient than using Lodash `cloneDeep`.

Overall, this benchmark provides a useful comparison of three different methods for cloning JavaScript objects, highlighting the trade-offs between speed, complexity, and accuracy.

Related benchmarks:

Lodash cloneDeep VS spread operator vs structured clone on complex object (version: 0)

Comparing performance of: Lodash cloneDeep vs Spread operator vs structuredClone

Created: 2 years ago by: Guest

Jump to the latest result

Lodash cloneDeep

Spread operator

structuredClone

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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