Benchmark: lodash cloneDeep vs object.assign vs spread

HTML Preparation code:


<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>

Tests:

lodash merge
var a = { a: 'oh', b: 'my' }; var c = _.cloneDeep(a);
object.assign
var a = { a: 'oh', b: 'my' }; var c = Object.assign({}, a);
spread
var a = { a: 'oh', b: 'my' }; var c = { ...a };

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
lodash merge
object.assign
spread

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 110 on Windows

View result in a separate tab

Test name	Executions per second
lodash merge	1734417.1 Ops/sec
object.assign	6817126.0 Ops/sec
spread	85711064.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring JavaScript performance is an essential task for any software engineer, and MeasureThat.net provides a great platform to do so.

Let's break down the provided benchmark:

**Benchmark Definition JSON**

The benchmark defines three test cases: `lodash merge`, `object.assign`, and `spread`. These are all related to cloning or copying objects in JavaScript.

*   **Lodash Merge**: The first test case uses Lodash, a popular utility library for JavaScript. It clones a deeply nested object using the `_` symbol (aliased as `lodash`) and assigns it to another variable.
*   **Object.assign**: The second test case uses the built-in `Object.assign()` method to clone an object by creating a shallow copy of its properties.
*   **Spread Operator**: The third test case uses the spread operator (`{ ...a }`) to create a new object with the same properties as `a`, but without cloning the original object.

**What are the options being compared?**

The three test cases compare the performance of:

1.  Cloning an object using Lodash's `_cloneDeep()` method.
2.  Cloning an object using the built-in `Object.assign()` method with an empty object (`{}`) as the destination.
3.  Using the spread operator (`{ ...a }`) to create a new object.

**Pros and Cons of each approach**

Here are some key points about each approach:

*   **Lodash Merge**: Pros: It can handle nested objects, including arrays and other objects within the structure. Cons: It requires an external library (Lodash) and may have a slightly higher overhead due to function calls.
*   **Object.assign**: Pros: Built-in method, no external dependencies required, lightweight. Cons: Only handles shallow copies; not suitable for deeply nested objects or arrays.
*   **Spread Operator**: Pros: Simple, intuitive syntax, can handle simple cases (e.g., copying properties from an object). Cons: May lead to unexpected behavior if used with complex data structures; does not perform deep cloning.

**Other considerations**

When dealing with object cloning in JavaScript, it's essential to consider:

*   **Null and undefined**: These values cannot be cloned or copied using the standard methods.
*   **Cyclic references**: If an object contains a reference to itself (e.g., `a = { b: a }`), attempting to clone it can lead to infinite recursion.

**Library Usage**

The Lodash library is used in the first test case (`lodash merge`). It provides several utility functions for tasks like cloning, merging, and manipulating objects. The specific function used here is `_cloneDeep()`, which recursively clones an object's properties without modifying the original structure.

In summary, MeasureThat.net provides a useful platform to compare the performance of different JavaScript object cloning approaches. Understanding the pros and cons of each method will help you make informed decisions when working with complex data structures in your codebase.

Related benchmarks:

lodash cloneDeep vs object.assign vs spread (version: 0)

Comparing performance of: lodash merge vs object.assign vs spread

Created: 6 years ago by: Guest

Jump to the latest result

lodash merge

object.assign

spread

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