Benchmark: Object cloning with Lodash clone vs cloneDeep vs merge vs ES6 object spread vs ES6 Object.assign vs structuredClone

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)
Lodash merge
const a = _.merge({}, o)
ES6 spread
const a = { ...o }
ES6 Object.assign
const a = Object.assign({}, o)
ES6 structuredClone
const a = structuredClone(o)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lodash clone
Lodash cloneDeep
Lodash merge
ES6 spread
ES6 Object.assign
ES6 structuredClone

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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36

Browser/OS: Chrome 118 on Windows

View result in a separate tab

Test name	Executions per second
Lodash clone	1436456.2 Ops/sec
Lodash cloneDeep	235764.4 Ops/sec
Lodash merge	147443.3 Ops/sec
ES6 spread	12428702.0 Ops/sec
ES6 Object.assign	3618760.8 Ops/sec
ES6 structuredClone	198469.6 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the provided benchmark.

**What is being tested?**

The benchmark tests six different methods for creating a shallow copy of an object:

1. Lodash `clone()` method
2. Lodash `cloneDeep()` method (which creates a deep copy)
3. Merging an empty object with the original using `merge()`
4. Using the spread operator (`{ ...o }`)
5. Using `Object.assign()` to create a shallow copy
6. Using `structuredClone()` (a relatively new feature introduced in ECMAScript 2022)

**Options being compared:**

Each method has its own strengths and weaknesses.

1. **Lodash `clone()`**: This method creates a shallow copy of the object, which means it only copies the top-level properties. It's faster than `cloneDeep()`, but may not be suitable for deeply nested objects.
2. **Lodash `cloneDeep()`**: This method creates a deep copy of the object, which means it recursively copies all properties and their values. It's slower than `clone()`, but ensures that the copied object is fully independent from the original.
3. **Merging an empty object with the original using `merge()`**: This approach can be useful when you want to create a new object by copying the properties from an existing object, while preserving any additional properties on the target object. However, it may not be suitable for all use cases.
4. **Using the spread operator (`{ ...o }`)**: This method creates a shallow copy of the object by spreading its top-level properties into a new object. It's concise and easy to read, but only copies the top-level properties.
5. **Using `Object.assign()`**: This method creates a shallow copy of the object by assigning its values to a new object. It's similar to `clone()`, but may be slower due to the overhead of function calls.
6. **Using `structuredClone()`**: This is a relatively new feature that creates a deep copy of an object, while also preserving any metadata associated with the original object. It's still experimental and might not be supported by all browsers.

**Pros and Cons:**

Here are some pros and cons for each method:

1. Lodash `clone()`: Fast, but only copies top-level properties.
	* Pros: Quick and easy to use.
	* Cons: May not work well with deeply nested objects.
2. Lodash `cloneDeep()`: Slower, creates a deep copy of the object.
	* Pros: Ensures that the copied object is fully independent from the original.
	* Cons: Can be slower than other methods.
3. Merging an empty object with the original using `merge()`:
	* Pros: Preserves additional properties on the target object.
	* Cons: May not work well for all use cases.
4. Using the spread operator (`{ ...o }`):
	* Pros: Concise and easy to read.
	* Cons: Only copies top-level properties, which can lead to loss of data.
5. Using `Object.assign()`:
	* Pros: Similar to `clone()`, but may be faster due to reduced overhead.
	* Cons: May still be slower than other methods.
6. Using `structuredClone()`:
	* Pros: Creates a deep copy of the object, while preserving metadata.
	* Cons: Experimental feature, not supported by all browsers.

**Libraries and special features:**

1. **Lodash**: A popular JavaScript utility library that provides various functions for data manipulation and creation.
2. **Structured Clone**: A relatively new feature introduced in ECMAScript 2022, which creates a deep copy of an object while preserving metadata.

I hope this explanation helps you understand the benchmark results!

Related benchmarks:

Object cloning with Lodash clone vs cloneDeep vs merge vs ES6 object spread vs ES6 Object.assign vs structuredClone (version: 0)

Comparing performance of: Lodash clone vs Lodash cloneDeep vs Lodash merge vs ES6 spread vs ES6 Object.assign vs ES6 structuredClone

Created: one year ago by: Guest

Jump to the latest result

Lodash clone

Lodash cloneDeep

Lodash merge

ES6 spread

ES6 Object.assign

ES6 structuredClone

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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