Benchmark: Lodash cloneDeep vs 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:

window.obj = {};
// 10 number properties
for (let i = 0; i < 10; i++) {
    const key = (Math.random() + 1).toString(36).substring(7);
    obj[key] = Math.random();
}
// 10 nested object properties
for (let i = 0; i < 10; i++) {
    const key = (Math.random() + 1).toString(36).substring(7);
    obj[key] = {
        foo: Math.random(),
        bar: true,
        baz: {
            baz: "Hello World"
        }
    }
}

Tests:

_cloneDeep
const obj2 = _.cloneDeep(obj)
Object spread
const obj3 = {...obj}
Structured clone
const obj4 = structuredClone(obj)
Object.assign
const obj5 = Object.assign({}, obj)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
_cloneDeep
Object spread
Structured clone
Object.assign

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:139.0) Gecko/20100101 Firefox/139.0

Browser/OS: Firefox 139 on Windows

View result in a separate tab

Object.assign

6.8M/s

Object spread

2.1M/s

Structured clone

99K/s

_cloneDeep

76K/s

View exact numbers

Test name	Executions per second
✓ Object.assign	6,769,928 Ops/sec
Object spread	2,109,088 Ops/sec
Structured clone	99,214 Ops/sec
_cloneDeep	75,986 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in this benchmark.

**Benchmark Definition**

The benchmark is comparing four different approaches to create a deep copy of an object:

1. `_.cloneDeep` from Lodash
2. Object spread (`{...obj}`)
3. Structured clone (`structuredClone`)
4. `Object.assign({}, obj)`

**Options Compared**

These options are compared in terms of their performance, specifically the number of executions per second.

**Pros and Cons**

Here's a brief overview of each option:

1. **_.cloneDeep**: Lodash provides a utility function for deep cloning objects. This method is widely used and well-maintained. However, it requires importing an external library (Lodash), which may not be desirable in all cases.
2. **Object spread`: This approach creates a new object by spreading the properties of the original object using the syntax `{...obj}`. It's a concise and modern way to create copies, but it may not work as expected with complex objects or circular references.
3. **Structured clone**: The structured clone algorithm is an ISO standard for cloning objects (RFC 7480). This method is designed to be efficient and safe, even when dealing with complex objects. It's also a standardized approach, which ensures consistency across different browsers.
4. **Object.assign`: This approach creates a new object by merging the properties of the original object using `Object.assign`. However, it can lead to unexpected behavior if not used carefully (e.g., when dealing with null or undefined values).

**Library and Purpose**

In this benchmark, Lodash is used for its `_.cloneDeep` function. The purpose of this library is to provide a set of utility functions that can be used to simplify common tasks in JavaScript.

**Special JS Feature or Syntax**

There are no special JS features or syntaxes being tested in this benchmark. All options are standard JavaScript approaches to creating copies of objects.

**Other Alternatives**

If you're looking for alternative approaches, here are a few more:

* **JSON.parse(JSON.stringify(obj))**: This approach uses the `JSON.parse` function to create a copy of an object by serializing it as JSON and then parsing it back into an object. However, this method can lead to performance issues with large objects.
* **Array.prototype.slice.call()`: This approach creates a new array by slicing the original array using `Array.prototype.slice`. It's not typically used for creating copies of complex objects.

In summary, this benchmark compares four approaches to create deep copies of objects: Lodash's `_cloneDeep`, object spread, structured clone, and `Object.assign`. Each option has its pros and cons, and understanding these differences can help you choose the best approach for your specific use case.

Lodash cloneDeep vs Object spread (version: 0)

Comparing performance of: `_cloneDeep vs Object spread vs Structured clone vs Object.assign`

Created: 2 years ago by: Guest

Go to the latest result

_cloneDeep

Object spread

Structured clone

Object.assign

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Lodash cloneDeep vs Object spread (version: 0)

Comparing performance of: _cloneDeep vs Object spread vs Structured clone vs Object.assign

Created: 2 years ago by: Guest

Go to the latest result

_cloneDeep

Object spread

Structured clone

Object.assign

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: `_cloneDeep vs Object spread vs Structured clone vs Object.assign`