Benchmark: Lodash cloneDeep vs native cloneDeep vs spread

Lodash cloneDeep vs native cloneDeep vs spread (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 Object spread

Created: 2 years 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]);
Object spread
testCopy = [ ...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
Object spread

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 122 on Windows

View result in a separate tab

Test name	Executions per second
Lodash cloneDeep	195971.5 Ops/sec
Native map deep slice(turns objects into arrays)	2669689.2 Ops/sec
Native JSON parse	261081.7 Ops/sec
Native map deep slice at 0(turns objects into arrays)	2513726.5 Ops/sec
Native map(shallow clone)	4608612.5 Ops/sec
Recursive deep clone	175742.0 Ops/sec
Map deep clone	194754.8 Ops/sec
Object.assign shallow clone	2821934.2 Ops/sec
Object spread	4829576.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark definition and test cases to understand what is being tested.

**Benchmark Definition:**

The benchmark compares different methods for copying or cloning arrays in JavaScript. The goal is to determine which method is fastest, most efficient, and least resource-intensive.

**Test Cases:**

There are 8 test cases, each comparing a different approach:

1. **Lodash cloneDeep**: Uses the `lodash` library's `cloneDeep` function to create a deep copy of the array.
2. **Native map(shallow clone)**: Creates a shallow copy of the array using the spread operator (`[...arr]`) or the `Array.from()` method.
3. **Object.assign shallow clone**: Creates a shallow copy of the array using the `Object.assign()` method.
4. **Native map deep slice**: Creates a deep copy of the array by slicing it and then using the spread operator to create a new array with the sliced elements.
5. **Native map deep slice at 0**: Similar to the previous point, but starts from index 0 instead of spreading the entire array.
6. **Native JSON parse**: Not actually copying the array, but parsing it as if it were a JSON string (not clear why this is included).
7. **Lodash cloneDeep**: Repeats the same test case as #1 for comparison purposes.
8. **Map deep clone**: Creates a deep copy of the array using a custom implementation.

**What's being tested:**

The benchmark is testing the performance, efficiency, and resource usage of each method for copying or cloning arrays in JavaScript. The goal is to determine which method is fastest and least resource-intensive, which can help developers optimize their code for performance-critical applications.

Some observations from the test results:

* **Object spread** (methods 3-5) are relatively fast and efficient.
* **Lodash cloneDeep** (methods 1 and 7) uses more resources than the object spread methods but is still relatively fast.
* **Native JSON parse** (method 6) seems to be the slowest, likely due to its unnecessary complexity.
* **Recursive deep clone** (method 8) is also slower than the other methods.

Overall, this benchmark helps developers understand the trade-offs between different array copying and cloning methods in JavaScript and choose the most efficient approach for their specific use cases.

Related benchmarks: