Benchmark: Object cloning with Lodash 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)
JSON.parse(JSON.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
JSON.parse(JSON.stringify())

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 125 on Mac OS X 10.15.7

View result in a separate tab

ES6 spread

19.9M/s

ES6 Object.assign

6.8M/s

Lodash clone

3.4M/s

JSON.parse(JSON.stringify())

1.0M/s

Lodash cloneDeep

491K/s

Lodash merge

355K/s

View exact numbers

Test name	Executions per second
✓ ES6 spread	19,928,436 Ops/sec
ES6 Object.assign	6,816,626 Ops/sec
Lodash clone	3,402,694 Ops/sec
JSON.parse(JSON.stringify())	1,028,606 Ops/sec
Lodash cloneDeep	490,962 Ops/sec
Lodash merge	355,188 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Explanation**

The provided benchmark measures the performance of different methods for cloning or manipulating JavaScript objects.

**Options Compared**

1. **Lodash Clone**: Uses `_.clone()` to create a shallow copy of the object.
2. **Lodash Clone Deep**: Uses `_.cloneDeep()` to create a deep copy of the object.
3. **Lodash Merge**: Uses `_.merge()` to merge two objects, overwriting properties from the second object.
4. **ES6 Spread**: Uses the spread operator (`{ ...o }`) to create a shallow copy of the object.
5. **ES6 Object Assign**: Uses `Object.assign()` to create a new object and assign properties from the original object.
6. **JSON.parse(JSON.stringify())**: Uses JSON serialization and deserialization to create a deep copy of the object.

**Pros and Cons of Each Approach**

1. **Lodash Clone**: Fast, but can lead to memory leaks if not used carefully due to shallow copying.
2. **Lodash Clone Deep**: Slower than Lodash Clone, but ensures a deep copy without any potential memory issues.
3. **Lodash Merge**: Can be slow and may result in unexpected behavior if not used correctly.
4. **ES6 Spread**: Fast and efficient for shallow copies, but may not work as expected with nested objects or arrays.
5. **ES6 Object Assign**: Can lead to unexpected behavior if the source object has properties that are functions or other types of values that can't be assigned directly.
6. **JSON.parse(JSON.stringify())**: Slower than Lodash Clone and ES6 Spread, but ensures a deep copy without any potential memory issues.

**Library and Purpose**

* **Lodash**: A popular JavaScript utility library that provides functional programming helpers, including cloning and merging functions.
	+ `_.clone()` creates a shallow copy of the object.
	+ `_.cloneDeep()` creates a deep copy of the object.
	+ `_.merge()` merges two objects, overwriting properties from the second object.

**Special JS Feature or Syntax**

None mentioned in this explanation.

Object cloning with Lodash clone vs cloneDeep vs merge vs ES6 object spread vs ES6 Object.assign vs JSON.parse(JSON.stringify()) (version: 0) Benchmark.js

Comparing performance of: `Lodash clone vs Lodash cloneDeep vs Lodash merge vs ES6 spread vs ES6 Object.assign vs JSON.parse(JSON.stringify())`

Created: 6 years ago by: Guest

Go to the latest result

Lodash clone

Lodash cloneDeep

Lodash merge

ES6 spread

ES6 Object.assign

JSON.parse(JSON.stringify())

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Object cloning with Lodash clone vs cloneDeep vs merge vs ES6 object spread vs ES6 Object.assign vs JSON.parse(JSON.stringify()) (version: 0) Benchmark.js

Comparing performance of: Lodash clone vs Lodash cloneDeep vs Lodash merge vs ES6 spread vs ES6 Object.assign vs JSON.parse(JSON.stringify())

Created: 6 years ago by: Guest

Go to the latest result

Lodash clone

Lodash cloneDeep

Lodash merge

ES6 spread

ES6 Object.assign

JSON.parse(JSON.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 JSON.parse(JSON.stringify())`