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

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Chrome 7 runs

Recursive clone deep

1.9M/s

JSON parse

1.0M/s

For loop

811K/s

Lodash cloneDeep

682K/s

Recursive reduce clone deep

489K/s

Fastest: Recursive clone deep (4.0x faster)

View exact numbers

✓ Recursive clone deep: 1,949,094 ops/sec
• JSON parse: 1,037,470 ops/sec
• For loop : 811,343 ops/sec
• Lodash cloneDeep: 682,031 ops/sec
• Recursive reduce clone deep: 489,467 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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

Recursive clone deep

3.1M/s

JSON parse

1.0M/s

For loop

811K/s

Recursive reduce clone deep

762K/s

Lodash cloneDeep

623K/s

View exact numbers

Test name	Executions per second
✓ Recursive clone deep	3,131,526 Ops/sec
JSON parse	1,037,470 Ops/sec
For loop	811,343 Ops/sec
Recursive reduce clone deep	762,011 Ops/sec
Lodash cloneDeep	623,315 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.

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

Go to the latest result

Lodash cloneDeep

JSON parse

For loop

Recursive clone deep

Recursive reduce clone deep

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Chrome 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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

Go to the latest result

Lodash cloneDeep

JSON parse

For loop

Recursive clone deep

Recursive reduce clone deep

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Chrome 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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