Benchmark: Lodash deep clone vs JSON parse stringify

HTML Preparation code:

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

Script Preparation code:

window.dater = {
    name: 'test',
    arr: [1, 2, 3, 4, 5],
    innerObj: {
        name: 'Test Inner',
        innerArr: [2, 4, 5, 6],
        isDeleted: false,
    },
    sigh: true,
};

Tests:

JSON
const res = JSON.parse(JSON.stringify(window.dater))
clone deep
const result = _.cloneDeep(window.dater)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
JSON
clone deep

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 129 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
JSON	1208402.1 Ops/sec
clone deep	793943.1 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):

LLMs can make mistakes. Check important info.

The provided benchmark tests two approaches for deep cloning a JavaScript object: using the JSON serialization method and using the Lodash library's `cloneDeep` function. Below, we'll break down the options being compared, their pros and cons, and considerations for software engineers.

### **Benchmark Overview**

1. **JSON Parse-Stringify Method**
   - **Benchmark Definition**: `const res = JSON.parse(JSON.stringify(window.dater));`
   - **Description**: This method leverages the JSON object in JavaScript to serialize an object to a JSON string with `JSON.stringify()` and then immediately parse that string back into a JavaScript object using `JSON.parse()`. This effectively creates a deep clone of the original object.
  
2. **Lodash Clone Deep Method**
   - **Benchmark Definition**: `const result = _.cloneDeep(window.dater);`
   - **Description**: This method uses Lodash, a popular utility library, to perform a deep clone of the object. The `_.cloneDeep()` function can handle various types of objects, including those containing nested objects, arrays, and other JavaScript data structures.

### **Comparative Evaluation**

#### **JSON Parse-Stringify Method**
- **Pros**:
  - **Simplicity**: This method is straightforward and requires no additional dependencies.
  - **Performance**: In this benchmark, it shows a higher execution speed than Lodash, indicating it may be the faster option for this specific test case.
- **Cons**:
  - **Limitations**: The JSON method will fail to clone objects with certain properties, such as functions, `undefined`, and symbols. It also cannot handle circular references.
  - **Loss of Data Types**: Data types like `Date` and `RegExp` will be converted to their JSON equivalents (e.g., `Date` to string) and lose their type.

#### **Lodash Clone Deep Method**
- **Pros**:
  - **Versatility**: Lodash’s `cloneDeep()` can handle a broader range of data types (functions, dates, special objects) and does not throw errors for circular references.
  - **More Control**: Lodash may provide options for customizing the cloning behavior.
- **Cons**:
  - **Dependency**: It introduces an external dependency, which might increase the bundle size of your application if not used judiciously.
  - **Performance**: While it performs well for complex objects, in this benchmark it was slower than the JSON method.

### **Considerations**
- **Use Case**: The decision between these methods should depend on the requirements of your application. If you need a simple and quick solution for basic objects (without functions or special types), JSON parse-stringify is suitable. If you're dealing with more complex objects or want to ensure data integrity across various types, Lodash is a better choice.
- **Performance**: Always measure performance based on the specific data structure you expect in your application. Benchmarking in a real-world scenario is crucial since results may vary with different object shapes or sizes.

### **Alternatives**
Beyond the methods tested here, there are other strategies for deep cloning objects in JavaScript:
- **Manual Cloning**: Write a custom recursive function to traverse and clone objects. This approach offers maximum flexibility but requires thorough testing to ensure accuracy.
- **Structured Clone**: Newer versions of JavaScript with the `structuredClone()` method are available in modern browsers, which offer a standardized way to deep clone objects, including complex data types such as Map, Set, and all built-in types.
- **Immutable.js or Immer.js**: Libraries like these provide immutable data structures and can help manage complex state more efficiently, though they introduce their own paradigms and learnings.

By considering these methods and their trade-offs, software engineers can choose the most appropriate deep cloning strategy for their specific use case.

Related benchmarks:

Lodash deep clone vs JSON parse stringify (version: 1)

Comparing performance of: JSON vs clone deep

Created: one month ago by: Registered User

Jump to the latest result

JSON

clone deep

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):