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

HTML Preparation code:

<script src='https://cdn.jsdelivr.net/npm/lodash@3.10.1/index.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)
Lodash assign
const a = _.assign({}, 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
Lodash assign
ES6 spread
ES6 Object assign

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36

Browser/OS: Chrome 89 on Windows

View result in a separate tab

Test name	Executions per second
Lodash clone	2253558.0 Ops/sec
Lodash cloneDeep	555951.2 Ops/sec
Lodash merge	271382.2 Ops/sec
Lodash assign	2255432.0 Ops/sec
ES6 spread	10530281.0 Ops/sec
ES6 Object assign	3017451.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what is being tested on MeasureThat.net:

**Benchmark Definition JSON**

The test case measures the performance of different methods for creating a copy of an object in JavaScript. The original object `o` contains nested structures, including arrays and objects.

**Tested Options**

The benchmark compares six options:

1. **Lodash clone**: Uses the `_clone()` method from Lodash to create a shallow copy of the original object.
2. **Lodash cloneDeep**: Uses the `_cloneDeep()` method from Lodash to create a deep copy of the original object.
3. **Lodash merge**: Uses the `_merge()` method from Lodash to merge the original object with an empty object, effectively creating a new object that is a copy of the original.
4. **Lodash assign**: Uses the `_assign()` method from Lodash to create a new object and then assigns properties from the original object to it, effectively creating a copy of the original object.
5. **ES6 spread**: Uses the syntax `{ ...o }` to create a new object with the same properties as the original object.
6. **ES6 Object.assign**: Uses the `Object.assign()` method to create a new object and then assigns properties from the original object to it, effectively creating a copy of the original object.

**Pros and Cons**

* **Lodash clone and cloneDeep**: These methods are specific to Lodash and may not be available in all JavaScript environments. They provide deep copies, which can be beneficial for complex objects.
* **Lodash merge and assign**: These methods create new objects that are shallow copies of the original object. While they may be faster than cloning or spreading, they may not preserve nested structures as accurately.
* **ES6 spread**: This syntax is concise but may not work in older JavaScript environments without polyfills. It creates a shallow copy of the original object and preserves some nested structures.
* **ES6 Object.assign**: This method is widely supported and provides a way to create a new object with assigned properties from the original object. However, it can be slower than cloning or spreading for large objects.

**Library: Lodash**

Lodash is a popular JavaScript utility library that provides a set of helper functions for tasks such as array manipulation, object creation, and more. The `_clone()` and `_cloneDeep()` methods are part of Lodash's `clone` module, which allows you to create deep copies of objects.

**Special JS Feature/ Syntax**

The benchmark uses the ES6 spread syntax (`{ ...o }`) and the `Object.assign()` method, which are newer features in JavaScript. If your environment does not support these features, you may need to use alternative methods or polyfills.

**Alternatives**

If you prefer not to use Lodash or its specific methods, you can explore other options:

* **JSON.parse()`**: You can use `JSON.parse()` to create a new object from a JSON string. However, this method is slower than cloning or spreading for large objects.
* **Array.prototype.slice()` and object.assign()**: You can use `Array.prototype.slice()` and `object.assign()` to create shallow copies of arrays and objects, respectively.
* **Manual property assignment**: You can manually assign properties from the original object to a new object using dot notation (e.g., `newObject = { ... }; newObject.a = o.a;`). However, this method is often slower than cloning or spreading.

Related benchmarks:

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

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

Created: 3 years ago by: Guest

Jump to the latest result

Lodash clone

Lodash cloneDeep

Lodash merge

Lodash assign

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 2 months ago):