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

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
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

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Measuring the performance of different JavaScript methods for object cloning and manipulation is essential to ensure efficient code execution.

The provided JSON represents a benchmark with six test cases, each testing a distinct approach:

1. **Lodash clone**: Uses the `_.clone()` method from Lodash, a popular utility library that provides functional programming helpers.
2. **Lodash cloneDeep**: Utilizes the `_.cloneDeep()` method from Lodash, designed to create an exact deep copy of the source object.
3. **Lodash merge**: Employs the `_.merge()` method from Lodash, which merges multiple sources into a single target object.
4. **ES6 spread**: Uses the syntax `{ ...o }` (spread operator) to create a shallow copy of the source object.
5. **ES6 Object.assign**: Leverages the `Object.assign()` method to merge the source object with a new target object.
6. **JSON Parse**: Applies `JSON.parse(JSON.stringify(o))`, a trick that uses JSON serialization and deserialization to create an exact deep copy of the source object.

Now, let's discuss the pros and cons of each approach:

**Pros and Cons:**

*   **Lodash clone** and **Lodash cloneDeep**: Both methods provide accurate copies of objects but may have performance implications due to the overhead of using a library. On the other hand, they are well-tested and widely adopted, ensuring compatibility with various environments.
    *   Pros: Accurate copies, compatible libraries.
    *   Cons: Performance overhead, dependency on Lodash.
*   **Lodash merge**: Similar to `_.clone()` and `_.cloneDeep`, this method provides a simple way to merge objects but may not be the most efficient solution.
    *   Pros: Simple implementation, compatibility with Lodash.
    *   Cons: May not be the fastest option, dependency on Lodash.
*   **ES6 spread**: This approach creates a shallow copy of an object by spreading its properties into a new target object. While it's a concise and efficient way to create copies, it may not work correctly for nested objects or those containing functions or symbols.
    *   Pros: Concise implementation, efficient.
    *   Cons: Limited support for nested objects and certain types (functions, symbols).
*   **ES6 Object.assign**: This method merges one or more source objects into a target object. Similar to `_.merge()` from Lodash, it's simple but may not provide the most efficient solution.
    *   Pros: Simple implementation, compatibility with native JavaScript.
    *   Cons: May not be the fastest option, limited control over merging behavior.
*   **JSON Parse**: This trick uses JSON serialization and deserialization to create an exact deep copy of the source object. While it's a reliable method for creating copies, it may have performance implications due to the overhead of encoding and decoding JSON data.
    *   Pros: Accurate copies, compatibility with any environment that supports JSON parsing.
    *   Cons: Performance overhead, complexity.

**Alternative approaches:**

Other methods you can use for object cloning include:

*   **Array.prototype.slice()**: Creates a shallow copy of an array by copying its elements into a new array.
*   **Array.prototype.concat()**: Copies the elements from one or more source arrays into a new array.
*   **Object.create()** and **Object.assign()**: Can be used together to create a deep copy of an object.

Keep in mind that each method has its strengths and weaknesses, and choosing the best approach depends on your specific use case and performance requirements.

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

Browser/OS: Chrome 96 on Linux

View result in a separate tab

Test name	Executions per second
Lodash clone	1517064.5 Ops/sec
Lodash cloneDeep	246622.0 Ops/sec
Lodash merge	168033.8 Ops/sec
ES6 spread	13576210.0 Ops/sec
ES6 Object.assign	3868648.0 Ops/sec
JSON Parse	437533.2 Ops/sec

Related benchmarks:

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

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

Created: 2 years ago by: Guest

Jump to the latest result

Lodash clone

Lodash cloneDeep

Lodash merge

ES6 spread

ES6 Object.assign

JSON Parse

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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