Benchmark: Object cloning with Lodash clone vs cloneDeep vs merge vs assign vs ES6 object spread vs ES6 Object.assign AWD AWd AWd AWd AWd Wd AW d

HTML Preparation code:

<script src='https://cdn.jsdelivr.net/npm/lodash@4.17.21/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

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**Benchmark Definition**

The provided benchmark measures the performance of different methods for object cloning and merging in JavaScript. The benchmark defines an object `o` with nested properties and an array `e`. The test cases use various libraries or built-in functions to clone or merge this object, and we'll explore each one:

1. **Lodash Clone**: Uses Lodash's `clone()` function to create a shallow copy of the original object.
2. **Lodash Clone Deep**: Uses Lodash's `cloneDeep()` function to create a deep copy of the original object, which recursively clones all nested properties.
3. **Lodash Merge**: Uses Lodash's `merge()` function to merge the original object with an empty object.
4. **Lodash Assign**: Uses Lodash's `assign()` function to create a shallow copy of the original object by assigning its properties to a new object.
5. **ES6 Spread**: Uses the spread operator (`{ ...o }`) to create a new object with the same properties as the original object, without modifying it.
6. **ES6 Object Assign**: Uses the `Object.assign()` method to create a shallow copy of the original object by assigning its properties to a new object.

**Library and Purpose**

* Lodash: A popular JavaScript utility library that provides various functions for tasks like cloning, merging, and assigning objects.
* ES6 Spread: A built-in JavaScript feature introduced in ECMAScript 2018 (ES6) that allows you to create new objects by spreading the properties of an existing object.

**Pros and Cons**

Here's a brief summary of each approach:

1. **Lodash Clone**: Shallow copy, fast, but may not preserve nested properties.
2. **Lodash Clone Deep**: Deep copy, slower due to recursion, preserves all nested properties.
3. **Lodash Merge**: Merges with an empty object, faster than clone or assign, but may result in unexpected behavior if not used carefully.
4. **Lodash Assign**: Shallow copy, similar to ES6 spread, but requires Lodash.
5. **ES6 Spread**: Fast, shallow copy, no additional libraries required, but does not preserve nested properties.
6. **ES6 Object Assign**: Slowest due to method call overhead, may not work as expected with nested objects.

**Special Features and Syntax**

* ES6 spread (`{ ...o }`): A concise way to create a new object by spreading the properties of an existing object. This approach does not preserve nested properties.
* Lodash functions (e.g., `clone()`, `cloneDeep()`, `merge()`, `assign()`: These functions provide more control over cloning and merging objects, but may be slower than built-in methods.

**Alternatives**

Other alternatives for object cloning and merging include:

* **JSON.parse(JSON.stringify(obj))**: A simple way to clone an object, which works well with primitive types but can fail with nested objects.
* **Array.prototype.slice.call(obj)**: A method that creates a shallow copy of an object by converting it to an array.
* **Object.create() + Object.assign()**: A method that creates a new object and assigns the properties of another object to it.

Keep in mind that these alternatives may have different performance characteristics or behavior than the methods tested in the benchmark.

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/103.0.5060.114 Safari/537.36

Browser/OS: Chrome 103 on Linux

View result in a separate tab

Test name	Executions per second
Lodash clone	966574.2 Ops/sec
Lodash cloneDeep	176891.3 Ops/sec
Lodash merge	132865.5 Ops/sec
Lodash assign	1003787.5 Ops/sec
ES6 spread	6605555.0 Ops/sec
ES6 Object assign	1981054.4 Ops/sec

Related benchmarks:

Object cloning with Lodash clone vs cloneDeep vs merge vs assign vs ES6 object spread vs ES6 Object.assign AWD AWd AWd AWd AWd Wd AW d (version: 0)

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

Created: 2 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 27 days ago):