Benchmark: Lodash cloneDeep vs native cloneDeep vs native structuredClone

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

compare array copy/clone methods

Comparing performance of: Lodash cloneDeep vs Native map deep slice(turns objects into arrays) vs Native JSON parse vs Native map deep slice at 0(turns objects into arrays) vs Native map(shallow clone) vs Recursive deep clone vs Map deep clone vs Object.assign shallow clone vs Native structuredClone

Created: one year ago by: Guest

Jump to the latest result

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 = [];
        for (var index = 0; index < obj.length; ++index) {
            let subArray = obj[index];
            out.push((subArray === null) ? subArray : (subArray instanceof Date) ? new Date(subArray.valueOf()) : (typeof subArray === 'object') ? deepClone(subArray) : subArray);
        }
    } else {
        out = {};
        for (var key in obj) {
            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);
Native map deep slice(turns objects into arrays)
testCopy = testArray.map(arr => testArray.slice());
Native JSON parse
testCopy = JSON.parse(JSON.stringify(testArray));
Native map deep slice at 0(turns objects into arrays)
testCopy = testArray.map(arr => testArray.slice(0));
Native map(shallow clone)
testCopy = testArray.map(arr => arr);
Recursive deep clone
testCopy = deepClone(testArray);
Map deep clone
testCopy = testArray.map(arr => deepClone(arr));
Object.assign shallow clone
testCopy = Object.assign([...testArray]);
Native structuredClone
testCopy = structuredClone(testArray)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lodash cloneDeep
Native map deep slice(turns objects into arrays)
Native JSON parse
Native map deep slice at 0(turns objects into arrays)
Native map(shallow clone)
Recursive deep clone
Map deep clone
Object.assign shallow clone
Native structuredClone

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks. The provided benchmark compares various methods for copying or cloning arrays in JavaScript.

**Test Cases**

The benchmark consists of 8 test cases, each testing a different approach:

1. **Lodash cloneDeep**: Uses the `_.cloneDeep` function from Lodash to deep clone the array.
2. **Native map(shallow clone)**: Maps over the array using the spread operator (`...`) to create a shallow clone.
3. **Object.assign shallow clone**: Uses `Object.assign` to create a shallow clone of the array.
4. **Native map deep slice at 0**: Maps over the array using the spread operator, but with an offset (index 0) to create a deep slice.
5. **Native map deep slice**: Similar to the previous test, but without the offset.
6. **Native JSON parse**: Parses the array as JSON and then reconstructs it.
7. **Map deep clone**: Maps over the array using the spread operator and then uses `JSON.parse` to reconstruct the cloned array.
8. **Recursive deep clone**: Recursively clones each element in the array.

**Benchmark Results**

The benchmark results show the number of executions per second for each test case, measured on a Chrome 117 browser on a Windows desktop. The top-performing test case is **Native map(shallow clone)** with an average of 135,259,711 executions per second.

**Analysis and Conclusion**

The results suggest that native JavaScript methods (e.g., `map`, `Object.assign`) are generally faster than third-party libraries (e.g., Lodash) or more complex approaches. The top-performing test case uses a simple mapping approach with the spread operator, which is likely to be optimized by the browser.

However, it's essential to note that this benchmark may not represent real-world scenarios accurately. For example, the **Native JSON parse** test case might not be representative of common use cases, as parsing arrays as JSON is generally less efficient than other methods.

In conclusion, while native JavaScript methods seem to dominate the performance results, the specific approach and implementation details can significantly impact performance. Further optimizations or alternative approaches may be necessary for more complex scenarios.

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/117.0.0.0 Safari/537.36

Browser/OS: Chrome 117 on Windows

View result in a separate tab

Test name	Executions per second
Lodash cloneDeep	428240.5 Ops/sec
Native map deep slice(turns objects into arrays)	6767519.5 Ops/sec
Native JSON parse	504222.5 Ops/sec
Native map deep slice at 0(turns objects into arrays)	6811751.0 Ops/sec
Native map(shallow clone)	13525971.0 Ops/sec
Recursive deep clone	439800.8 Ops/sec
Map deep clone	494683.9 Ops/sec
Object.assign shallow clone	7586284.0 Ops/sec
Native structuredClone	259444.1 Ops/sec

Related benchmarks:

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

compare array copy/clone methods

Created: one year ago by: Guest

Jump to the latest result

Lodash cloneDeep

Native map deep slice(turns objects into arrays)

Native JSON parse

Native map deep slice at 0(turns objects into arrays)

Native map(shallow clone)

Recursive deep clone

Map deep clone

Object.assign shallow clone

Native structuredClone

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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