Benchmark: Object cloning with Lodash clone vs cloneDeep vs merge vs structuredClone vs JSON.parse(JSON.stringify(o))

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 clone
const a = _.clone(o)
Lodash cloneDeep
const a = _.cloneDeep(o)
JSON.parse(JSON.stringify(o))
const a = JSON.parse(JSON.stringify(o))
structuredClone
const a = o

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lodash clone
Lodash cloneDeep
JSON.parse(JSON.stringify(o))
structuredClone

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 26 days ago):

LLMs can make mistakes. Check important info.

Measuring JavaScript performance is crucial in today's fast-paced web development landscape. Let's break down the provided benchmarking test and explore the different approaches being compared.

**Benchmark Overview**

The benchmark compares four methods for object cloning:

1. `structuredClone`
2. `JSON.parse(JSON.stringify(o))`
3. Lodash's `clone` function
4. Lodash's `cloneDeep` function

Each method is tested against a sample input object `o`, which consists of nested objects and arrays.

**Method Overview**

1. **Structured Clone (`structuredClone`)**: Introduced in ECMAScript 2020, this method allows for deep cloning of objects while preserving metadata. It creates a new object with the same structure as the original but copies all its properties, including references to other objects.
2. **JSON.parse(JSON.stringify(o))**: This method uses JSON serialization and deserialization to create a copy of the object. While it works, it can lead to issues when dealing with objects that have circular references or other complexities.
3. **Lodash's `clone` function**: Lodash provides a simple way to clone an object, which creates a shallow copy by recursively copying properties. This method is suitable for most cases but may not work well with complex nested structures.
4. **Lodash's `cloneDeep` function**: A variation of the `clone` function, `cloneDeep` creates a deep copy of the object, which means it will recursively copy all nested properties.

**Comparison and Pros/Cons**

| Method | Description | Pros | Cons |
| --- | --- | --- | --- |
| `structuredClone` | Deep cloning with metadata preservation | Preserves original references | Currently only supported in modern browsers (Chrome 119) |
| `JSON.parse(JSON.stringify(o))` | Uses JSON serialization and deserialization | Simple to implement | May fail with circular references or complex objects |
| Lodash's `clone` | Shallow copying | Fast and lightweight | May not work well with deeply nested structures |
| Lodash's `cloneDeep` | Deep copying | Suitable for most cases | Slower than shallow cloning |

**Library and Syntax**

The benchmark uses the Lodash library, which provides a set of utility functions for various tasks. The `clone` and `cloneDeep` functions are used to clone objects.

**Special JS Feature**

There is no special JavaScript feature or syntax being tested in this benchmark. However, it's worth noting that some browsers may have additional features or polyfills that affect the performance of certain methods.

**Alternatives**

If you need an alternative to Lodash for object cloning, you can consider using:

* `Array.prototype.slice.call()` and `Object.assign()`
* `Object.create()` and `Object.assign()`
* A third-party library like Immutable.js

Keep in mind that these alternatives may have different performance characteristics or limitations compared to the methods being tested.

In summary, the benchmark provides a useful comparison of four object cloning methods, each with its strengths and weaknesses. By understanding the differences between these approaches, developers can make informed decisions about which method best suits their specific use cases.

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36

Browser/OS: Chrome 119 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Lodash clone	3220735.0 Ops/sec
Lodash cloneDeep	498924.0 Ops/sec
JSON.parse(JSON.stringify(o))	838850.2 Ops/sec
structuredClone	33214286.0 Ops/sec

Related benchmarks:

Object cloning with Lodash clone vs cloneDeep vs merge vs structuredClone vs JSON.parse(JSON.stringify(o)) (version: 0)

Comparing performance of: Lodash clone vs Lodash cloneDeep vs JSON.parse(JSON.stringify(o)) vs structuredClone

Created: one year ago by: Guest

Jump to the latest result

Lodash clone

Lodash cloneDeep

JSON.parse(JSON.stringify(o))

structuredClone

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 26 days ago):