Benchmark: lodash clonedeep vs json.parse(stringify()) vs deepClone v5

HTML Preparation code:

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

Script Preparation code:

var Books = [
  {
    id: 1,
    title: 'Great Book',
    price: null,
    available: true
  },
  {
    id: 2,
    title: 'Another Great Book',
    price: 11.99,
    available: false
  },
  {
    id: 3,
    title: 'Another Great Book',
    price: 9.99,
    available: true
  },
  {
    id: 4,
    title: 'Another Great Book',
    price: null,
    available: true
  },
  {
    id: 5,
    title: 'Another Great Book',
    price: 13.99,
    available: false
  } 
];

var clone = null;

function deepClone(source) {

    if (source instanceof Date) return new Date(source.getTime())

    if (Array.isArray(source)) {
      const clone = []
      let i = source.length
      
      while (i--) {
        const value = source[i]
        clone[i] = (value !== null && typeof value === 'object') ? deepClone(value) : value
      }
      
      return clone
    }

    const clone = {}

    for (const key in source) {
      if (source.hasOwnProperty(key)) {
        const value = source[key]
        clone[key] = (value !== null && typeof value === 'object') ? deepClone(value) : value
      }
    }

    return clone
}

Tests:

Lodash CloneDeep
clone = _.cloneDeep(Books);
Json Clone
clone = JSON.parse(JSON.stringify(Books));
deepClone
clone = deepClone(Books);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lodash CloneDeep
Json Clone
deepClone

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Measuring JavaScript performance is an essential part of ensuring the efficiency and scalability of web applications.

The provided benchmark measures the performance of three different methods for cloning complex objects in JavaScript: `lodash.cloneDeep`, `JSON.parse(JSON.stringify())`, and a custom implementation called `deepClone`. Here's a breakdown of each approach, their pros and cons, and what libraries or features are used:

**1. Lodash CloneDeep**

`_.cloneDeep()` is a function from the Lodash library that creates a deep copy of an object. It recursively clones all nested objects, arrays, and functions.

Pros:

* Handles complex object graphs with ease
* Preserves function references and other mutable properties
* Well-tested and widely adopted

Cons:

* Requires the Lodash library to be included in the project (which may add unnecessary overhead)
* May not perform as well for very large or deeply nested objects

**2. JSON.parse(JSON.stringify())**

This method uses `JSON.parse()` with a specially crafted string that includes all properties of the original object, and then parses it back into an object using `JSON.parse()`. This creates a deep copy of the original object.

Pros:

* Lightweight and easy to implement
* Does not require any external libraries

Cons:

* May fail for objects with certain properties (e.g., functions, undefined values) or types (e.g., Date objects)
* Can be slower than `lodash.cloneDeep` due to the parsing step
* Not designed to handle complex object graphs well

**3. Custom deepClone**

The custom implementation called `deepClone` is a simplified version of the Lodash clone function. It recursively clones all nested objects and arrays, but does not preserve function references or other mutable properties.

Pros:

* Lightweight and easy to implement
* Preserves most properties, except functions and certain object types

Cons:

* May not handle complex object graphs well
* Does not preserve function references or other mutable properties

The latest benchmark results show that `deepClone` performs the best among the three approaches, followed closely by `JSON.parse(JSON.stringify())`. `Lodash CloneDeep` is slightly slower but still a reliable choice.

In general, when deciding between these approaches, consider the following factors:

* Performance: If speed is critical and you have a large number of complex objects to clone, `lodash.cloneDeep` might be the best choice.
* Complexity: For simple object graphs, `JSON.parse(JSON.stringify())` could be sufficient. However, for more complex scenarios, `deepClone` or `lodash.cloneDeep` will likely perform better.
* Maintainability: If you prefer not to use external libraries, `JSON.parse(JSON.stringify())` is a lightweight option.

Other alternatives to consider:

* `Array.prototype.slice.call()`: This method creates a shallow copy of an array by creating a new array with the same elements. It's suitable for simple arrays but may not work well with complex objects or nested arrays.
* `Object.assign()`: This method creates a shallow copy of an object by copying all own properties to a new object. However, it does not handle complex object graphs well and may not preserve function references or other mutable properties.
* Third-party libraries like `immediate-clone` or `deep-copy`: These libraries offer more advanced cloning functionality than the Lodash implementation, but may require additional setup and testing.

Ultimately, the choice of cloning method depends on your specific use case, performance requirements, and personal preference.

Related benchmarks:

lodash clonedeep vs json.parse(stringify()) vs deepClone v5 (version: 0)

Comparing performance of: Lodash CloneDeep vs Json Clone vs deepClone

Created: 3 years ago by: Guest

Jump to the latest result

Lodash CloneDeep

Json Clone

deepClone

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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