Benchmark: Lodash cloneDeep vs for loop vs JSON parse vs recursive clone deep vs recursive reduce clone deep

HTML Preparation code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>

Script Preparation code:

var obj = {a: "hello", c: "test", num: 3, arr: [1, 2, 3, 4], anotherObj: {a: 35, str: "tester"}};

var deepClone = function(obj) {
    var out = null;
    
    if (Array.isArray(obj)) {
        out = [];
        for (var index = 0; index < obj.length; ++index) {
            var subArray = obj[index];
            out.push((typeof subArray === 'object') ? deepClone(subArray) : subArray);
        }
    } else {
        out = {};
        for (var key in obj) {
            var subObject = obj[key];
            out[key] = (typeof subObject === 'object') ? deepClone(subObject) : subObject;
        }
    }
    return out;
};

 function cloneArray(value) {
    var newArray;
    if (value && value.length) {
      newArray = [];
      for (var i = 0; i < value.length; i++) {
        if (typeof value[i] === 'object') {
          newArray[i] = Array.isArray(value[i]) ? cloneArray(value[i]) : cloneObject(value[i]);
        } else {
          newArray[i] = value[i];
        }
      }
    } else if (value === null) {
      newArray = null;
    }
    return newArray;
  }

  function cloneObject(value) {
    var newObject;
    if (value && typeof value === 'object' && Object.keys(value).length > 0) {
      newObject = {};
      for (var key in value) {
        if (typeof value[key] === 'object') { 
          newObject[key] = Array.isArray(value) ? cloneArray(value[key]) : cloneObject(value[key]);
        } else {
          newObject[key] = value[key];
        }
      }
    } else if (value && typeof value === 'object' && Object.keys(value).length === 0) {
      newObject = {};
    } else if (value === null) {
      newObject = null;
    }
    return newObject;
  }

function reduceDeepClone(obj) {
  return Object.keys(obj).reduce((v, d) => Object.assign(v, {
    [d]: (obj[d].constructor === Object) ? reduceDeepClone(obj[d]) : obj[d]
  }), {});
}

Tests:

Lodash cloneDeep
testCopy = _.cloneDeep(obj);
JSON parse
testCopy = JSON.parse(JSON.stringify(obj));
For loop
testCopy = cloneObject(obj);
Recursive clone deep
testCopy = deepClone(obj);
Recursive reduce clone deep
testCopy = reduceDeepClone(obj);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lodash cloneDeep
JSON parse
For loop
Recursive clone deep
Recursive reduce clone deep

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36

Browser/OS: Chrome 133 on Linux

View result in a separate tab

Test name	Executions per second
Lodash cloneDeep	623315.2 Ops/sec
JSON parse	1037470.4 Ops/sec
For loop	811342.7 Ops/sec
Recursive clone deep	3131526.5 Ops/sec
Recursive reduce clone deep	762011.3 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Explanation**

The provided JSON represents a JavaScript microbenchmarking test case named "Lodash cloneDeep vs for loop vs JSON parse vs recursive clone deep vs recursive reduce clone deep". The benchmark compares the execution performance of five different methods to create a deep copy (clone) of an object:

1. **Lodash.cloneDeep**: A popular library function from Lodash that performs a deep clone of an object.
2. **For loop**: A manual approach using a for loop to iterate through each property of the object and recursively clone its values.
3. **JSON.parse(JSON.stringify(obj))**: A built-in JavaScript method that uses JSON serialization to create a deep copy of an object.
4. **Recursive clone deep**: An implementation of a recursive function to create a deep clone of an object, similar to Lodash.cloneDeep.
5. **Recursive reduce clone deep**: Another implementation of a recursive function using `Object.keys()` and `reduce()` to create a deep clone of an object.

**Options Compared**

The benchmark compares the performance of these five methods across different browsers (Mobile Safari 17) on an iPhone with iOS 17.6.1 operating system.

**Pros and Cons of Each Approach**

1. **Lodash.cloneDeep**:
	* Pros: Widely used, well-maintained, and optimized for performance.
	* Cons: Requires including the Lodash library, which may add overhead to the benchmark.
2. **For loop**:
	* Pros: Customizable and easy to understand, but can be slow due to recursive function calls.
	* Cons: Manual implementation requires more effort and may lead to errors.
3. **JSON.parse(JSON.stringify(obj))**:
	* Pros: Built-in method, no additional library required.
	* Cons: May not work correctly with all types of objects or values (e.g., functions, dates).
4. **Recursive clone deep**:
	* Pros: Similar performance profile to Lodash.cloneDeep and easy to implement.
	* Cons: Requires manual implementation and may not be as optimized for performance.
5. **Recursive reduce clone deep**:
	* Pros: Uses `Object.keys()` and `reduce()`, which are efficient built-in methods.
	* Cons: May have performance overhead due to the use of these methods.

**Benchmark Results**

The benchmark results show the number of executions per second (ExecutionsPerSecond) for each method across different browsers on an iPhone with iOS 17.6.1 operating system. The top performer is Lodash.cloneDeep, followed by the recursive clone deep and recursive reduce clone deep implementations. Note that the order may vary depending on the specific browser and device.

In summary, this benchmark highlights the performance differences between various methods for creating a deep copy of an object in JavaScript.

Related benchmarks:

Lodash cloneDeep vs for loop vs JSON parse vs recursive clone deep vs recursive reduce clone deep (version: 22)

compare object deep copy/clone methods

Comparing performance of: Lodash cloneDeep vs JSON parse vs For loop vs Recursive clone deep vs Recursive reduce clone deep

Created: 7 years ago by: Registered User

Jump to the latest result

Lodash cloneDeep

JSON parse

For loop

Recursive clone deep

Recursive reduce clone deep

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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