Benchmark: lodash cloneDeep vs. JSON.parse(JSON.stringify()) vs. structuredClone vs

HTML Preparation code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/jsondiffpatch@0.4.1/dist/jsondiffpatch.umd.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/rfdc@1.3.0'></script>

Script Preparation code:

var MyObject = {
  description: 'Creates a deep copy of source, which should be an object or an array.',
  myNumber: 123456789,
  myBoolean: true,
  jayson: {
    stringify: 'JSON.stringify() method converts a JavaScript value to a JSON string....',
    parse: 'JSON.parse() method parses a JSON string...'
  }
};

var myCopy = null;

var rfdcClone = rfdc();

///////////////////////////////////////////////////////////////////
function recursiveDeepCopy(o) {
    var newO,
      i;
  
    if (typeof o !== 'object') {
      return o;
    }
    if (!o) {
      return o;
    }
  
    if ('[object Array]' === Object.prototype.toString.apply(o)) {
      newO = [];
      for (i = 0; i < o.length; i += 1) {
        newO[i] = recursiveDeepCopy(o[i]);
      }
      return newO;
    }
  
    newO = {};
    for (i in o) {
      if (o.hasOwnProperty(i)) {
        newO[i] = recursiveDeepCopy(o[i]);
      }
    }
    return newO;
  }

Tests:

lodash cloneDeep
myCopy = _.cloneDeep(MyObject);
JSON.parse(JSON.stringify())
myCopy = JSON.parse(JSON.stringify(MyObject));
recursiveDeepCopy
myCopy = recursiveDeepCopy(MyObject);
structuredClone
myCopy = structuredClone(MyObject);
rfdc
myCopy = rfdcClone(MyObject);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
lodash cloneDeep
JSON.parse(JSON.stringify())
recursiveDeepCopy
structuredClone
rfdc

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 days ago)

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

Browser/OS: Chrome 135 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
lodash cloneDeep	1721944.8 Ops/sec
JSON.parse(JSON.stringify())	1530035.0 Ops/sec
recursiveDeepCopy	5493822.5 Ops/sec
structuredClone	728631.1 Ops/sec
rfdc	6017647.0 Ops/sec

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

LLMs can make mistakes. Check important info.

This benchmark compares five different methods for creating deep copies of an object in JavaScript. The primary goal is to evaluate their performance in terms of how many copies can be created per second, which is quantified as "Executions Per Second." The methods being tested include:

1. **Lodash's `cloneDeep`**: 
   - **Benchmark Definition**: `myCopy = _.cloneDeep(MyObject);`
   - **Library**: Lodash is a utility library that provides modular functions for common programming tasks, including deep cloning. Lodash's `cloneDeep` handles a wide variety of edge cases, including circular references and complex objects, making it a robust but potentially slower option.
   - **Pros/Cons**:
     - **Pros**: Comprehensive handling of edge cases, ease of use.
     - **Cons**: Larger overhead due to the library's size and extra features, which can make it slower than native solutions.

2. **JSON `parse` and `stringify`**:
   - **Benchmark Definition**: `myCopy = JSON.parse(JSON.stringify(MyObject));`
   - **Description**: This method serializes the object into a JSON string and then parses it back into an object.
   - **Pros/Cons**:
     - **Pros**: Simple and straightforward, does not require any additional libraries.
     - **Cons**: Does not handle functions, `undefined`, and special object types (like Dates, Maps, Sets), and can fail on circular references.

3. **Custom recursive deep copy function**:
   - **Benchmark Definition**: `myCopy = recursiveDeepCopy(MyObject);`
   - **Functionality**: It recursively copies all properties of an object, handling both arrays and objects.
   - **Pros/Cons**:
     - **Pros**: Fully customizable and can handle specific needs of the coder. Can manage circular references if appropriately coded.
     - **Cons**: Can be complex to implement correctly, and performance may vary based on the implementation.

4. **Structured Clone**:
   - **Benchmark Definition**: `myCopy = structuredClone(MyObject);`
   - **Description**: The `structuredClone` function is a built-in JavaScript function that creates a deep copy of a given value, coping well with complex data types.
   - **Pros/Cons**:
     - **Pros**: Handles more complex types natively (like Dates, Maps, Sets, etc.), efficient and straightforward for general use.
     - **Cons**: Limited browser support in older versions — primarily available in modern browsers.

5. **Rfdc**:
   - **Benchmark Definition**: `myCopy = rfdcClone(MyObject);`
   - **Library**: Rfdc (Really Fast Deep Clone) is a small library specifically designed for fast deep cloning.
   - **Pros/Cons**:
     - **Pros**: Optimized for performance, lightweight, and handles many edge cases. 
     - **Cons**: Still not as comprehensive as Lodash in certain scenarios or when dealing with extremely complex or circular data structures.

### Benchmark Results Overview
In the benchmark results:
- **Rfdc** achieved the highest performance with approximately 6.48 million executions per second.
- The **custom recursive deep copy** function came in second at around 5.92 million executions per second.
- **Lodash's `cloneDeep`** and **JSON `parse/stringify`** performed significantly slower, and **structuredClone** had the lowest performance.

### Other Considerations
When choosing a deep copying method, developers should consider:
- **Performance**: For large and complex objects, performance can be a critical factor.
- **Complexity**: Simplicity versus handling edge cases effectively.
- **Browser Support**: Ensure that the selected method is compatible with the target environments.

### Alternatives
There are other libraries and methods for deep cloning in JavaScript, such as:
- **Deepmerge**: A library designed for merging objects deeply.
- **Immutable.js**: While it doesn't directly provide deep clones, it offers immutable data structures that help manage state without traditional deep copying.
- Manual cloning strategies that fit specific use cases better.

In conclusion, the choice of method depends largely on the specific needs of the application and its expected use cases. Performance, ease of use, edge case handling, and compatibility with different data types are often at the forefront of decision-making in this area.

Related benchmarks:

lodash cloneDeep vs. JSON.parse(JSON.stringify()) vs. structuredClone vs | On a Small Object (version: 1)

Comparing performance of: lodash cloneDeep vs JSON.parse(JSON.stringify()) vs recursiveDeepCopy vs structuredClone vs rfdc

Created: one month ago by: Guest

Jump to the latest result

lodash cloneDeep

JSON.parse(JSON.stringify())

recursiveDeepCopy

structuredClone

rfdc

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