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

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)

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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 7 days ago)

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

Browser/OS: Chrome 134 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Lodash clone	2796439.5 Ops/sec
Lodash cloneDeep	308687.6 Ops/sec
Lodash merge	182114.2 Ops/sec
ES6 spread	49871452.0 Ops/sec
ES6 Object.assign	37839708.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

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

**Methods Compared**

The benchmark compares five methods:

1. **Lodash clone**: Uses Lodash's `clone` function to create a shallow copy of an object.
2. **Lodash cloneDeep**: Uses Lodash's `cloneDeep` function to create a deep copy of an object, including nested arrays and objects.
3. **Lodash merge**: Uses Lodash's `merge` function to merge two objects into one, creating a new object that combines the properties of both input objects.
4. **ES6 spread**: Uses the spread operator (`{ ... }`) to create a shallow copy of an object by spreading its properties into a new object.
5. **ES6 Object.assign**: Uses the `Object.assign` method to create a shallow copy of an object by copying its enumerable own property values.

**Pros and Cons**

Here's a brief summary of each method:

1. **Lodash clone**: Creates a shallow copy of an object, which can be faster than deep copies but may not preserve nested objects. Pros: fast, easy to use. Cons: may not work well with deeply nested objects.
2. **Lodash cloneDeep**: Creates a deep copy of an object, including nested arrays and objects. Pros: preserves nested objects, safe for complex data structures. Cons: slower than shallow copies.
3. **Lodash merge**: Merges two objects into one, creating a new object that combines the properties of both input objects. Pros: fast and easy to use. Cons: may overwrite existing property values without warning.
4. **ES6 spread**: Creates a shallow copy of an object by spreading its properties into a new object. Pros: simple and efficient. Cons: may not work well with deeply nested objects or objects that have non-enumerable properties.
5. **ES6 Object.assign**: Creates a shallow copy of an object by copying its enumerable own property values. Pros: similar to ES6 spread, but more flexible in terms of the types of objects being copied. Cons: may be slower than other methods for very large or complex data sets.

**Library and Syntax**

* **Lodash clone**, **cloneDeep**, and **merge**: These functions are part of the Lodash library, which provides a comprehensive set of utility functions for JavaScript.
* **ES6 spread** and **Object.assign**: These syntaxes are built-in to modern JavaScript environments and do not require any external libraries.

**Special JS Features**

This benchmark does not explicitly use any special JavaScript features or syntax. However, it assumes the presence of modern JavaScript environments that support ES6 features such as template literals (`\r\n`) and the spread operator (`{ ... }`).

**Alternatives**

Other alternatives for cloning and manipulating JavaScript objects include:

* **JSON.parse(JSON.stringify(obj))**: This method creates a deep copy of an object by parsing its JSON representation and then stringifying it back into a JSON string, which is then parsed again to create a new object.
* **Array.prototype.slice() + Object.assign()**: This method creates a shallow copy of an array or object by using `slice()` to create a shallow copy of the array and then merging the resulting slice with another object using `Object.assign()`.
* **Recursion-based cloning methods**: These methods use recursive functions to clone nested objects, but can be slower and more complex than other methods.

Keep in mind that these alternatives may not provide the same level of performance or ease of use as the methods compared in this benchmark.

Related benchmarks:

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

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

Created: 6 years ago by: Registered User

Jump to the latest result

Lodash clone

Lodash cloneDeep

Lodash merge

ES6 spread

ES6 Object.assign

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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