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

Test name	Executions per second
Lodash clone	1301122.9 Ops/sec
Lodash cloneDeep	203163.7 Ops/sec
Lodash merge	127884.8 Ops/sec
ES6 spread	9458707.0 Ops/sec
ES6 Object.assign	3201332.5 Ops/sec
Stringify	423298.7 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.

Related benchmarks:

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

Jump 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):