Benchmark: lodash clonedeep vs json.parse(stringify()) vs structuredClone

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:

cloneDeep
myCopy = _.cloneDeep(MyObject);
JSON.parse
myCopy = JSON.parse(JSON.stringify(MyObject));
structuredClone
myCopy = structuredClone(MyObject);
recursiveDeepCopy
myCopy = recursiveDeepCopy(MyObject);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
cloneDeep
JSON.parse
structuredClone
recursiveDeepCopy

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36

Browser/OS: Chrome 111 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
cloneDeep	1526614.4 Ops/sec
JSON.parse	706304.2 Ops/sec
structuredClone	580618.6 Ops/sec
recursiveDeepCopy	1867695.4 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

**Benchmark Definition JSON**

The provided JSON represents a benchmark test case named "lodash clonedeep vs json.parse(stringify()) vs structuredClone". This test compares the performance of three different methods for creating a deep copy of an object:

1. `cloneDeep` from the Lodash library
2. `JSON.parse(JSON.stringify(MyObject))`
3. `structuredClone(MyObject)`

**Options Compared**

The options being compared are:

* `cloneDeep`: Creates a deep copy of an object using the Lodash library.
	+ Pros: Widely used and well-maintained library, provides additional utility functions beyond just cloning.
	+ Cons: May be overkill for simple use cases, can add unnecessary dependencies to projects.
* `JSON.parse(JSON.stringify(MyObject))`: Creates a deep copy of an object by parsing the JSON representation of the original object using `JSON.stringify`.
	+ Pros: Simple and lightweight solution, doesn't require any external libraries.
	+ Cons: May not work correctly for objects with circular references or non-JSON data types.
* `structuredClone(MyObject)`: Creates a deep copy of an object using the WebAssembly-based structured clone algorithm.
	+ Pros: Fast and efficient solution, designed specifically for creating deep copies of objects.
	+ Cons: Requires support for WebAssembly and may not be compatible with older browsers or environments.

**Library Descriptions**

* `lodash.clonedeep`: A utility function provided by the Lodash library that creates a deep copy of an object. It recursively traverses the original object, creating new copies of all nested objects and arrays.
* `JSON.parse(JSON.stringify(MyObject))`: A JavaScript method for converting an object to a JSON string and then parsing it back into an object. This approach relies on the fact that JSON has stricter type definitions than JavaScript, which can help prevent issues with circular references.
* `structuredClone(MyObject)`: A WebAssembly-based function designed specifically for creating deep copies of objects. It uses a proprietary algorithm to recursively traverse the original object and create new copies of all nested objects and arrays.

**Special JS Features or Syntax**

The benchmark test case does not explicitly use any special JavaScript features or syntax, but it relies on the fact that JSON has stricter type definitions than JavaScript, which can help prevent issues with circular references. The `structuredClone` function uses a proprietary algorithm, but its implementation is not shown in the provided code.

**Other Alternatives**

For creating deep copies of objects in JavaScript, other alternatives include:

* `Array.prototype.slice.call(object)`: Creates a shallow copy of an object by creating a new array and copying all properties from the original object.
* `Object.assign({}, object)`: Creates a shallow copy of an object by creating a new object and assigning all properties from the original object to it.
* `Object.create(null)`: Creates a new object with no prototype, allowing for more control over property creation.

However, these alternatives may not provide the same level of performance or feature completeness as the options being compared in this benchmark test case.

Related benchmarks:

lodash clonedeep vs json.parse(stringify()) vs structuredClone (version: 0)

Comparing performance of: cloneDeep vs JSON.parse vs structuredClone vs recursiveDeepCopy

Created: one year ago by: Guest

Jump to the latest result

cloneDeep

JSON.parse

structuredClone

recursiveDeepCopy

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