Benchmark: Lodash cloneDeep vs customize cloneDeep vs structuredClone

HTML Preparation code:

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

Script Preparation code:

var testArray = [{
    description: 'Random description.',
    testNumber: 123456789,
    testBoolean: true,
    testObject: {
        testString: 'test string',
        testNumber: 12345
    },
    testArray: [{
        myName: 'test name',
        myNumber: 123245
    }]
}, {
    description: 'Random description.',
    testNumber: 123456789,
    testBoolean: true,
    testObject: {
        testString: 'test string',
        testNumber: 12345
    },
    testArray: [{
        myName: 'test name',
        myNumber: 123245
    }]
}];

var testCopy = null;

var deepClone = function(obj) {
    var out;
    if (Array.isArray(obj)) {
        out = obj.map(function(subArray) {
          return (subArray === null) ? subArray : (subArray instanceof Date) ? new Date(subArray.valueOf()) : (typeof subArray === 'object') ? deepClone(subArray) : subArray;
        });
    } else {
        out = {};
        var keys = Object.keys(obj);
      	for (let i = 0, l = keys.length; i < l; i++) {
          var key = keys[i];
          var subObject = obj[key];
          out[key] = subObject === null ? subObject : subObject instanceof Date ? new Date(subObject.valueOf()) : (typeof subObject === 'object') ? deepClone(subObject) : subObject;
        }
    }
    return out;
};

Tests:

Lodash cloneDeep testCopy = _.cloneDeep(testArray); testCopy
testCopy = _.cloneDeep(testArray);
Native JSON parse
testCopy = JSON.parse(JSON.stringify(testArray));
Recursive deep clone
testCopy = deepClone(testArray);
structuredClone
testCopy = structuredClone(testArray);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lodash cloneDeep testCopy = _.cloneDeep(testArray); testCopy
Native JSON parse
Recursive deep clone
structuredClone

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.

I'll break down the provided JSON and explain what's being tested, the options compared, pros and cons of each approach, and other considerations.

**Benchmark Definition**

The benchmark definition is a script that creates an array of test objects, which includes properties with different data types (number, string, boolean, object, and array). The goal is to clone this array using different methods.

**Options Compared**

Four options are compared:

1. **Lodash `cloneDeep`**: A function from the Lodash library that recursively clones an object.
2. **Native `JSON.parse(JSON.stringify())`**: A built-in JavaScript method that uses a similar approach to `cloneDeep`, but only for primitive types and does not handle nested objects correctly.
3. **Recursive `deepClone`**: A custom function that manually clones the array by iterating over its elements and recursively cloning each object it finds.
4. **`structuredClone`**: A new JavaScript function introduced in ECMAScript 2020 (ES10) that creates a deep copy of an object, preserving all properties, including arrays and objects.

**Pros and Cons**

1. **Lodash `cloneDeep`**:
	* Pros: Handles nested objects correctly, efficient, and widely tested.
	* Cons: Requires an additional library (Lodash).
2. **Native `JSON.parse(JSON.stringify())`**:
	* Pros: Lightweight and easy to implement.
	* Cons: Only handles primitive types correctly, fails for object properties with non-simplified values (e.g., functions), and can lead to performance issues due to unnecessary cloning of arrays.
3. **Recursive `deepClone`**:
	* Pros: Customizable and fully controlled, handles complex data structures correctly.
	* Cons: More verbose and error-prone than built-in methods or Lodash's cloneDeep.
4. **`structuredClone`**:
	* Pros: New standard function that efficiently creates deep copies of objects, preserving all properties, including arrays and objects.
	* Cons: Limited browser support (only available in ES10+ browsers).

**Other Considerations**

* The benchmark uses a mix of simple and complex data types to evaluate the performance of each cloning method. This helps identify which methods are more efficient for common use cases.
* The test array is created using a single object with multiple properties, including arrays. This allows the benchmark to measure the overhead of creating a deep copy of the entire array.

**Browser Support**

The benchmark results show that the `structuredClone` function has better performance than the other methods in Chrome 102 on a Mac OS X system. However, browser support is limited, and users may need to use polyfills or wait for more widespread adoption before adopting this method.

**Lodash Library**

The Lodash library provides an efficient way to clone objects recursively, making it a popular choice among developers. However, including the library adds additional overhead due to its size and parsing requirements.

I hope this explanation helps you understand the benchmark and the options compared!

Related benchmarks:

Lodash cloneDeep vs customize cloneDeep vs structuredClone (version: 0)

Comparing performance of: Lodash cloneDeep testCopy = _.cloneDeep(testArray); testCopy vs Native JSON parse vs Recursive deep clone vs structuredClone

Created: 4 years ago by: Guest

Jump to the latest result

Lodash cloneDeep testCopy = _.cloneDeep(testArray); testCopy

Native JSON parse

Recursive deep clone

structuredClone

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