Benchmark: Comparing deep cloning methods (array of objects): Lodash <> Custom clone func <> JSON.parse <> structuredClone

HTML Preparation code:

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

Script Preparation code:

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;
  }

var MyObject = [
    {
        "key": "categories.id",
        "values": [
            "7549d23f-ef1a-4e2a-9649-2b6ca3d7a2d0",
            "ef7504a4-97c9-4efa-a6d2-ec25ebc953c2"
        ]
    },
    {
        "key": "variants.attributes.ageRangeFacets",
        "values": [
            "6+",
            "9+"
        ]
    },
    {
        "key": "variants.scopedPrice.currentValue.centAmount",
        "ranges": [
            {
                "from": "0",
                "to": "2000"
            },
            {
                "from": "10000",
                "to": "20000"
            }
        ]
    }
];

var myCopy = null;

Tests:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lodash
Custom function
JSON.parse
structuredClone

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 102 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Lodash	419265.4 Ops/sec
Custom function	506533.4 Ops/sec
JSON.parse	406973.2 Ops/sec
structuredClone	320974.8 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark.

**Benchmark Overview**

The benchmark compares four different methods for creating a deep copy of an array of objects: Lodash's `cloneDeep`, a custom function, `JSON.parse` with `JSON.stringify`, and `structuredClone`.

**What is being tested?**

* **Lodash's `cloneDeep`**: This method creates a deep copy of an object or an array by recursively creating new objects and arrays. The goal is to test its performance.
* **Custom function (recursiveDeepCopy)**: This is the custom implementation provided in the benchmark definition. It also uses recursion to create a deep copy of the input object.
* **`JSON.parse` with `JSON.stringify`**: This method creates a deep copy by converting the original object to a JSON string and then parsing it back into an object. While this works, it can be slow for large objects due to the overhead of serializing and deserializing the data.
* **`structuredClone`**: This is a newer method introduced in ECMAScript 2020 that creates a deep copy of an object by recursively creating new objects and arrays. It's designed to be more efficient than `JSON.parse` with `JSON.stringify`.

**Options Compared**

The benchmark compares two main approaches:

1. **Recursive cloning** (Lodash's `cloneDeep`, custom function, and `structuredClone`): These methods create a deep copy by recursively traversing the input object and creating new objects and arrays.
2. **Serialization-based cloning** (`JSON.parse` with `JSON.stringify`): This method creates a deep copy by serializing the original object to a JSON string and then parsing it back into an object.

**Pros and Cons**

* **Recursive Cloning**
	+ Pros:
		- Can handle complex objects with nested arrays and objects.
		- Can be more efficient for large objects, as it avoids the overhead of serialization and deserialization.
	+ Cons:
		- Can be slower for very large objects due to recursive function calls.
		- May cause stack overflow errors if the input object is too deeply nested.
* **Serialization-based Cloning**
	+ Pros:
		- Generally faster than recursive cloning, as it avoids recursive function calls.
	+ Cons:
		- Can lose information about the original object's data types and context.
		- May not handle complex objects with nested arrays and objects correctly.

**Library and Purpose**

* **Lodash**: A popular JavaScript library that provides a wide range of utility functions, including `cloneDeep`.
* **JSON.parse` and `JSON.stringify`: Part of the ECMAScript specification, these methods are used to convert between JSON strings and JavaScript objects.
* **structuredClone**: A newer method introduced in ECMAScript 2020, designed to create deep copies of objects while preserving their data types and context.

**Special JS Feature or Syntax**

The benchmark uses a custom function (`recursiveDeepCopy`) that implements recursive cloning. This requires an understanding of JavaScript's object creation and traversal mechanisms.

Overall, the benchmark helps compare the performance of different cloning methods in JavaScript, providing insights into their strengths and weaknesses.

Related benchmarks:

Comparing deep cloning methods (array of objects): Lodash <> Custom clone func <> JSON.parse <> structuredClone (version: 0)

Missing clone-deep

Comparing performance of: Lodash vs Custom function vs JSON.parse vs structuredClone

Created: 2 years ago by: Registered User

Jump to the latest result

Lodash

Custom function

JSON.parse

structuredClone

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