Benchmark: Lodash cloneDeep vs structuredClone vs recursiveDeepCopy vs JSON clone

HTML Preparation code:

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

Script Preparation code:

var MyObject = {
  description: 'Creates a deep copy of source, which should be an object or an array.',
  myNumber: 123456789,
  myBoolean: true,
  jayson: {
    stringify: 'JSON.stringify() method converts a JavaScript value to a JSON string....',
    parse: 'JSON.parse() method parses a JSON string...'
  }
};

var myCopy = null;

function recursiveDeepCopy(o) {
    var newO,
      i;
  
    if (typeof o !== 'object') {
      return o;
    }
    if (!o) {
      return o;
    }
  
    if ('[object Array]' === Object.prototype.toString.apply(o)) {
      newO = [];
      for (i = 0; i < o.length; i += 1) {
        newO[i] = recursiveDeepCopy(o[i]);
      }
      return newO;
    }
  
    newO = {};
    for (i in o) {
      if (o.hasOwnProperty(i)) {
        newO[i] = recursiveDeepCopy(o[i]);
      }
    }
    return newO;
  }

Tests:

Lodash cloneDeep
myCopy = _.cloneDeep(MyObject);
Native structuredClone
myCopy = structuredClone(MyObject);
recursiveDeepCopy
myCopy = recursiveDeepCopy(MyObject);
Json Clone
myCopy = JSON.parse(JSON.stringify(MyObject));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lodash cloneDeep
Native structuredClone
recursiveDeepCopy
Json Clone

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/147.0.0.0 Safari/537.36

Browser/OS: Chrome 147 on Windows

View result in a separate tab

Test name	Executions per second
Lodash cloneDeep	1556791.6 Ops/sec
Native structuredClone	469081.5 Ops/sec
recursiveDeepCopy	5141412.0 Ops/sec
Json Clone	1402420.2 Ops/sec

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

LLMs can make mistakes. Check important info.

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

**Benchmark Overview**

The benchmark compares the performance of four different methods to create a deep copy of an object:

1. `structuredClone` (native method)
2. `cloneDeep` from Lodash library
3. `recursiveDeepCopy` (custom implementation)
4. `JSON.parse(JSON.stringify())`

**Options Compared**

Each option is being tested for its execution speed, measured in executions per second.

**Pros and Cons of Each Approach:**

1. **structuredClone (Native Method)**:
	* Pros: Native method, likely to be highly optimized for performance.
	* Cons: Only supported in modern browsers (Chrome 130+), may not work in older browsers or environments with limited support for `structuredClone`.
2. **cloneDeep from Lodash library**:
	* Pros: Widely used and well-tested library, provides a simple and robust way to create deep copies.
	* Cons: May introduce additional overhead due to the library's functionality, which is not always necessary.
3. **recursiveDeepCopy (Custom Implementation)**:
	* Pros: Custom implementation allows for fine-grained control over the copying process, potentially resulting in faster execution times.
	* Cons: May be more complex and harder to maintain than using a established library like Lodash.

**Other Considerations**

When creating deep copies, it's essential to consider factors such as:

* **Object type**: Different object types (e.g., arrays, objects) may require different copying strategies.
* **Cyclic references**: Objects with cyclic references (i.e., references pointing back to themselves) can cause issues during the copying process.
* **Deep vs. shallow copies**: Depending on the requirements, a deep copy (creating new objects and recursively copying their properties) or a shallow copy (just copying reference values) might be more suitable.

**Library Descriptions**

1. **Lodash library**: A popular utility library providing various functions for tasks like array manipulation, string manipulation, and functional programming.
2. **JSON.parse(JSON.stringify())**: A built-in method in JavaScript that creates a deep copy of an object by recursively parsing the object's properties as JSON strings.

**Special JS Feature/Syntax**

* `structuredClone` is a new feature introduced in ECMAScript 2020 (ES12), which allows creating deep copies of objects.
* `Object.prototype.toString.apply()` is a method to retrieve the type of an object, used in the custom implementation of `recursiveDeepCopy`.

In summary, the benchmark compares the performance of four different methods for creating deep copies of objects: native `structuredClone`, Lodash's `cloneDeep`, and two custom implementations (`recursiveDeepCopy` and `JSON.parse(JSON.stringify())`). The choice of method depends on factors like browser support, library usage, and personal preference.

Related benchmarks:

Lodash cloneDeep vs structuredClone vs recursiveDeepCopy vs JSON clone (version: 0)

https://developer.mozilla.org/en-US/docs/Web/API/structuredClone

Comparing performance of: Lodash cloneDeep vs Native structuredClone vs recursiveDeepCopy vs Json Clone

Created: 4 years ago by: Registered User

Jump to the latest result

Lodash cloneDeep

Native structuredClone

recursiveDeepCopy

Json Clone

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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