Benchmark: Lodash cloneDeep vs native cloneDeep macOS safari

Lodash cloneDeep vs native cloneDeep macOS safari (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

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

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: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.5 Safari/605.1.15

Browser/OS: Safari 16 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Lodash cloneDeep	371672.9 Ops/sec
Native map deep slice(turns objects into arrays)	5864430.0 Ops/sec
Native JSON parse	719982.6 Ops/sec
Native map deep slice at 0(turns objects into arrays)	5676362.0 Ops/sec
Native map(shallow clone)	9944794.0 Ops/sec
Recursive deep clone	446386.8 Ops/sec
Map deep clone	473516.0 Ops/sec
Object.assign shallow clone	6776111.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark compares the performance of different approaches to create a deep copy of an array in JavaScript:

1. Using `_.cloneDeep` from Lodash
2. Creating a shallow clone using `map`
3. Creating a shallow clone using `Object.assign`
4. Recursively creating a deep clone using a custom function
5. Recursively creating a deep clone using a custom function and applying it to each element in the array

**What's being tested**

The benchmark is testing the performance of these different approaches on a sample array containing nested objects and arrays.

**Options Compared**

Here's a brief summary of what's being compared:

1. **Lodash `_.cloneDeep`**: This approach uses Lodash's `cloneDeep` function to create a deep copy of the entire object, including all nested properties.
2. **Shallow Clone using `map`**: This approach creates a new array by mapping over the original array and creating a new element for each item in the array. The new elements are shallow copies of the original items, not deep copies.
3. **Shallow Clone using `Object.assign`**: Similar to the previous approach, this method creates a new object by copying the properties from the original object using `Object.assign`. Again, only shallow copies are created.
4. **Recursive Deep Clone**: This custom function recursively creates a deep copy of each nested object and array in the original data structure.
5. **Recursive Deep Clone with Array Application**: This approach applies the recursive cloning function to each element in the original array, creating a deep copy of each item.

**Browser Performance Data**

The benchmark provides performance data for each test on a Safari 16 browser running on Mac OS X 10.15.7, including:

* `ExecutionsPerSecond`: The number of times each operation is executed per second.
* `RawUAString` and other metadata: Not directly relevant to the analysis, but may provide additional context about the benchmarking setup.

**Interpretation**

The results suggest that the Lodash approach (`_.cloneDeep`) outperforms all other approaches in terms of execution speed. The recursive deep clone approaches are slower due to their custom implementation and overhead. However, it's essential to note that these results may not generalize well beyond this specific benchmarking setup.

Keep in mind that the choice of approach often depends on the specific use case and requirements. If you need a deep copy of an object for performance-critical code, using `_.cloneDeep` from Lodash might be the most efficient option.

Related benchmarks:

Lodash cloneDeep vs native cloneDeep macOS safari (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

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

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