Benchmark: Lodash cloneDeep vs native cloneDeep (copy object2)

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 testObject = {
  description: 'Random description.',
  testNumber: 123456789,
  testBoolean: true,
  testObject: {
    testString: 'test string',
    testNumber: 12345
  }
};

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(testObject);
Native map deep slice(turns objects into arrays)
testCopy = [testObject].map(arr => [testObject].slice());
Native JSON parse
testCopy = JSON.parse(JSON.stringify(testObject));
Native map deep slice at 0(turns objects into arrays)
testCopy = [testObject].map(arr => [testObject].slice(0));
Deep Clone test
testCopy = deepClone(testObject)

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)
Deep Clone test

Fastest: N/A

Slowest: N/A

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

Browser/OS: Chrome 112 on Windows

View result in a separate tab

Test name	Executions per second
Lodash cloneDeep	746138.0 Ops/sec
Native map deep slice(turns objects into arrays)	4395931.0 Ops/sec
Native JSON parse	512107.6 Ops/sec
Native map deep slice at 0(turns objects into arrays)	4466300.5 Ops/sec
Deep Clone test	748314.2 Ops/sec

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

LLMs can make mistakes. Check important info.

I'm ready to dive into the explanation.

**Benchmark Definition and Script Preparation Code**

The benchmark measures the performance of various methods for cloning and copying objects in JavaScript, specifically arrays and objects. The script preparation code creates two test objects: `testObject` and `testArray`. `testObject` is a simple object with a nested object and some primitive values. `testArray` is an array containing another object.

The benchmark definition code defines four different methods for cloning and copying these objects:

1. **Lodash cloneDeep**: Uses the `_cloneDeep` function from the Lodash library to create a deep copy of `testObject`.
2. **Native map deep slice**: Creates a new array by mapping over `testArray` using the `map` method, which returns a new array with a cloned version of each element.
3. **Native JSON parse**: Uses `JSON.parse(JSON.stringify(testObject))` to create a clone of `testObject`.
4. **Native map deep slice at 0**: Creates a new array by mapping over `testArray` using the `map` method, but this time slices the original array from the start (index 0) and creates a new array with cloned versions of each element.

**Options Compared**

The benchmark compares four different approaches:

1. **Lodash cloneDeep**: A library-based approach that uses a dedicated function for deep cloning objects.
2. **Native map deep slice**: A built-in JavaScript method for creating a new array by mapping over an existing array, which can be used to create a cloned version of the array.
3. **Native JSON parse**: A built-in JavaScript method for parsing a JSON string and creating a cloned object from it.
4. **Native map deep slice at 0**: A variation of the native `map` method that slices the original array from the start.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

1. **Lodash cloneDeep**:
	* Pros: Easy to use, fast, and efficient.
	* Cons: Requires an external library (Lodash).
2. **Native map deep slice**:
	* Pros: Fast and efficient, built-in method.
	* Cons: May not work as expected with complex objects or arrays.
3. **Native JSON parse**:
	* Pros: Built-in method, simple to use.
	* Cons: May not work correctly with complex objects or custom data types.
4. **Native map deep slice at 0**:
	* Pros: Fast and efficient, built-in method.
	* Cons: Slices the original array from the start, which may not be desirable in all cases.

**Other Considerations**

When choosing a cloning or copying method, consider the following factors:

* **Performance**: If speed is critical, native methods like `map` and `JSON.parse` might be faster. However, Lodash's `_cloneDeep` function is often optimized for performance.
* **Complexity**: If you're dealing with complex objects or arrays, consider using a dedicated library like Lodash to ensure correctness and efficiency.
* **Readability**: Choose a method that is easy to understand and maintain, even for simple cloning tasks.

I hope this explanation helps you understand the benchmark and its various approaches!

Related benchmarks:

Lodash cloneDeep vs native cloneDeep (copy object2) (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 Deep Clone test

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)

Deep Clone test

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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