Benchmark: clone vs cloneDeep vs merge vs ES6 object spread vs ES6 Object.assign vs JSON.parse(JSON.Stringify())

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)
Stringify
const a = JSON.parse(JSON.stringify(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
Stringify

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36

Browser/OS: Chrome 124 on Linux

View result in a separate tab

ES6 spread

9.5M/s

ES6 Object.assign

3.2M/s

Lodash clone

1.3M/s

Stringify

423K/s

Lodash cloneDeep

203K/s

Lodash merge

128K/s

View exact numbers

Test name	Executions per second
✓ ES6 spread	9,458,707 Ops/sec
ES6 Object.assign	3,201,332 Ops/sec
Lodash clone	1,301,123 Ops/sec
Stringify	423,299 Ops/sec
Lodash cloneDeep	203,164 Ops/sec
Lodash merge	127,885 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 benchmark and its individual test cases.

**Benchmark Definition**

The benchmark tests six different approaches to clone, merge, or create copies of JavaScript objects:

1. `clone` (Lodash): Creates a shallow copy of an object.
2. `cloneDeep` (Lodash): Creates a deep copy of an object, including nested arrays and objects.
3. `merge`: Merges two objects into one, creating new properties from the source if they don't exist in the target.
4. ES6 spread (`{ ...o }`): Creates a new object with the same properties as `o`, but with optional property values.
5. ES6 Object.assign: Copies the value of an existing property from another object into the current object.
6. `Stringify` (JSON.parse(JSON.stringify(o))): Recursively creates a deep copy of an object by serializing it to JSON and then parsing it back.

**Options Compared**

Each test case compares the performance of one specific approach against others. The options compared are:

* `clone` vs `cloneDeep`: Shallow copying versus deep copying.
* `merge` vs ES6 spread: Merging objects versus creating a new object with optional property values.
* ES6 Object.assign vs ES6 spread: Using `Object.assign` to copy properties versus using the spread operator.

**Pros and Cons**

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

1. **clone (Lodash)**:
	* Pros: Simple, lightweight, and easy to use.
	* Cons: Only creates shallow copies, which can lead to unexpected behavior when working with nested objects.
2. **cloneDeep (Lodash)**:
	* Pros: Creates deep copies, ensuring that all properties are properly copied.
	* Cons: Heavier than `clone`, as it recursively creates new objects and arrays.
3. **merge**:
	* Pros: Easy to use, especially when merging small objects.
	* Cons: Can lead to unexpected behavior if the source object has nested objects or arrays with default values.
4. ES6 spread (`{ ...o }`):
	* Pros: Lightweight, easy to use, and creates a new object without mutating the original.
	* Cons: Only copies top-level properties; deeper properties are lost.
5. ES6 Object.assign:
	* Pros: Creates a shallow copy of an object's enumerable properties.
	* Cons: Can lead to unexpected behavior when working with nested objects or arrays.
6. `Stringify` (JSON.parse(JSON.stringify(o))):
	* Pros: Recursively creates deep copies, ensuring all properties are properly copied.
	* Cons: Can be slower than other approaches due to the overhead of serializing and parsing JSON.

**Other Considerations**

When choosing an approach, consider the specific requirements of your use case:

* If you need to create a shallow copy of an object with no nested objects or arrays, `clone` might be sufficient.
* If you need to create a deep copy of an object, `cloneDeep` is usually the best choice.
* If you're working with small objects and need to merge them quickly, `merge` or ES6 spread might be acceptable.
* If you need to work with nested objects or arrays, consider using `cloneDeep` or `Stringify`.

**Alternatives**

Other alternatives to these approaches include:

* Using the `JSON.parse(JSON.stringify(o))` method for deep copying.
* Implementing your own cloning and merging functions using recursion and object iteration.
* Using libraries like `lodash-es` or `lodash-compat` for their respective functionality.

Keep in mind that the choice of approach depends on your specific use case, performance requirements, and personal preferences.

clone vs cloneDeep vs merge vs ES6 object spread vs ES6 Object.assign vs JSON.parse(JSON.Stringify()) (version: 0)

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

Created: 4 years ago by: Guest

Go to the latest result

Lodash clone

Lodash cloneDeep

Lodash merge

ES6 spread

ES6 Object.assign

Stringify

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

clone vs cloneDeep vs merge vs ES6 object spread vs ES6 Object.assign vs JSON.parse(JSON.Stringify()) (version: 0)

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

Created: 4 years ago by: Guest

Go to the latest result

Lodash clone

Lodash cloneDeep

Lodash merge

ES6 spread

ES6 Object.assign

Stringify

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: `Lodash clone vs Lodash cloneDeep vs Lodash merge vs ES6 spread vs ES6 Object.assign vs Stringify`