Benchmark: Lodash cloneDeep vs native cloneDeep

Lodash cloneDeep vs native cloneDeep (version: 11)

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

Created: 7 years ago by: Registered User

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]);

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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36 Edg/143.0.0.0

Browser/OS: Chrome 143 on Windows

View result in a separate tab

Test name	Executions per second
Lodash cloneDeep	549414.9 Ops/sec
Native map deep slice(turns objects into arrays)	11933320.0 Ops/sec
Native JSON parse	856104.8 Ops/sec
Native map deep slice at 0(turns objects into arrays)	11565493.0 Ops/sec
Native map(shallow clone)	12999539.0 Ops/sec
Recursive deep clone	2856005.0 Ops/sec
Map deep clone	3032384.5 Ops/sec
Object.assign shallow clone	11948237.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided JSON represents a JavaScript microbenchmarking test case, specifically designed to compare the performance of different methods for cloning and copying arrays in JavaScript.

**Cloning Methods Compared**

The benchmark compares six different methods for cloning or copying arrays:

1. **Native map deep slice**: `testCopy = testArray.map(arr => testArray.slice());`
2. **Native JSON parse**: `testCopy = JSON.parse(JSON.stringify(testArray));`
3. **Object.assign shallow clone**: `testCopy = Object.assign([...testArray]);`
4. **Lodash cloneDeep**: `testCopy = _.cloneDeep(testArray);` (using the Lodash library)
5. **Map deep clone**: `testCopy = testArray.map(arr => _.cloneDeep(arr));`
6. **Recursive deep clone**: `testCopy = function recursiveClone(obj) { return Object.keys(obj).reduce((acc, key) => { acc[key] = recursiveClone(obj[key]); return acc; }, {}); }(testArray);`

**Performance Results**

The benchmark results show the number of executions per second for each method on a specific browser and operating system configuration. The top-performing methods are:

1. **Native map deep slice**: 3,170,140 executions/second
2. **Object.assign shallow clone**: 3,561,60 executions/second
3. **Native JSON parse**: 356,763.6 executions/second

The other methods perform significantly slower.

**Observations and Insights**

* The native map deep slice method is the fastest way to copy an array in JavaScript.
* Object.assign shallow clone is a good alternative to map deep slice when you don't need to preserve the original array structure.
* Native JSON parse is slower than expected, likely due to the overhead of parsing and stringifying objects.
* Lodash cloneDeep is not faster than native methods, despite being popular among developers.
* Map deep clone and recursive deep clone are slower than other methods because they involve multiple iterations over the object's properties.

Overall, this benchmark highlights the importance of choosing the most efficient cloning method for your specific use case.

Related benchmarks: