Benchmark: new Lodash cloneDeep vs native cloneDeep

new Lodash cloneDeep vs native cloneDeep (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 structuredClone

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

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:98.0) Gecko/20100101 Firefox/98.0

Browser/OS: Firefox 98 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
Lodash cloneDeep	137768.0 Ops/sec
Native map deep slice(turns objects into arrays)	8214317.5 Ops/sec
Native JSON parse	280760.0 Ops/sec
Native map deep slice at 0(turns objects into arrays)	9037873.0 Ops/sec
Native map(shallow clone)	25496018.0 Ops/sec
Recursive deep clone	650748.9 Ops/sec
Map deep clone	670931.6 Ops/sec
Object.assign shallow clone	13751258.0 Ops/sec
structuredClone	207311.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into explaining the benchmark and its various test cases.

**Benchmark Overview**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks. The provided JSON represents a benchmark definition for comparing different approaches to cloning arrays in JavaScript.

**Test Cases**

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

1. **Lodash cloneDeep**: Tests the `cloneDeep` function from Lodash, a popular JavaScript utility library.
2. **Native map deep slice (at 0)**: Tests using the `map` method with a callback that uses `slice(0)` to create a shallow copy of the array.
3. **Native map deep slice (full)**: Tests using the `map` method without any modifications, which creates a full copy of the array.
4. **Map deep clone**: Tests creating an array by mapping over the original array and cloning each element individually.
5. **Recursive deep clone**: Tests recursively cloning each element in the array.
6. **Native JSON parse**: Tests using the `JSON.parse` method to create a new array from a string representation of the original array.
7. **structuredClone**: Tests using the `structuredClone` function, a newer Web API for efficient cloning of objects.

**Explanation of Each Test Case**

* **Lodash cloneDeep**: This test case uses Lodash's `cloneDeep` function to create a deep copy of the original array. The benchmark measures the execution speed of this approach.
* **Native map deep slice (at 0)**: This test case creates a shallow copy of the original array by using the `map` method with a callback that uses `slice(0)`. The benchmark measures the execution speed of this approach.
* **Native map deep slice (full)**: Similar to the previous test case, but without the `slice(0)` optimization. This test case creates a full copy of the original array by using the `map` method.
* **Map deep clone**: This test case creates an array by mapping over the original array and cloning each element individually. The benchmark measures the execution speed of this approach.
* **Recursive deep clone**: This test case recursively clones each element in the array. The benchmark measures the execution speed of this approach.
* **Native JSON parse**: This test case uses the `JSON.parse` method to create a new array from a string representation of the original array. The benchmark measures the execution speed of this approach.
* **structuredClone**: This test case uses the `structuredClone` function, a newer Web API for efficient cloning of objects. The benchmark measures the execution speed of this approach.

**Benchmark Results**

The provided JSON includes benchmark results for each test case, showing the number of executions per second (ExecutionsPerSecond) on a desktop platform running Firefox 98. The test name and corresponding result can be inferred from the JSON data.

In summary, the benchmark compares different approaches to cloning arrays in JavaScript, including using Lodash's `cloneDeep` function, native methods like `map`, `JSON.parse`, and `structuredClone`, as well as recursive cloning and a custom implementation using `map`.

Related benchmarks:

new Lodash cloneDeep vs native cloneDeep (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 structuredClone

Created: 2 years 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

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