Benchmark: Comparing deep cloning methods (small object): 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 = {
  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;

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	1285448.5 Ops/sec
Custom function	1590489.9 Ops/sec
JSON.parse	632891.8 Ops/sec
structuredClone	463829.2 Ops/sec

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

LLMs can make mistakes. Check important info.

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

**Benchmark Description**

The benchmark compares four different approaches to create a deep clone of an object: Lodash, Custom function (using a recursive deep copy approach), JSON.parse, and structuredClone.

**What is tested?**

The main goal of this benchmark is to determine which method provides the fastest execution time for creating a deep clone of an object. The object being cloned is called `MyObject`, which has several properties, including nested objects and arrays.

**Options compared**

1. **Lodash**: Uses the `cloneDeep` function from Lodash, a popular JavaScript library.
2. **Custom function**: A custom recursive function `recursiveDeepCopy` that manually implements the deep cloning process.
3. **JSON.parse**: Uses the `JSON.stringify` method to convert the original object into a JSON string and then parses it back into an object using `JSON.parse`.
4. **structuredClone**: Uses the `structuredClone` method, a newer API introduced in JavaScript, which creates a deep clone of an object.

**Pros and cons**

* **Lodash**: Pros: convenient, well-tested library; Cons: adds external dependency, might not be suitable for very large objects due to memory constraints.
* **Custom function**: Pros: gives fine-grained control over the cloning process; Cons: requires manual implementation, might lead to errors or performance issues if not implemented correctly.
* **JSON.parse**: Pros: widely supported and well-established; Cons: uses extra memory to store the JSON string, might be slower than Lodash or custom function due to the conversion overhead.
* **structuredClone**: Pros: efficient and safe, designed specifically for deep cloning objects; Cons: relatively new API, not supported in older browsers.

**Special JS feature/syntax**

None mentioned explicitly. However, it's worth noting that `JSON.parse` and `structuredClone` rely on ECMAScript 2022 features (`JSON.stringify` and `structuredClone`, respectively), which might not be supported by all browsers or versions of Node.js.

**Other alternatives**

If you need a deep clone but want to avoid using Lodash, you could consider implementing your own recursive function similar to the custom function provided in the benchmark. Alternatively, if you're working with older browsers that don't support `structuredClone`, you might need to stick with one of the other approaches.

In summary, this benchmark compares four different methods for creating a deep clone of an object: Lodash, Custom function, JSON.parse, and structuredClone. The choice of method depends on factors like performance requirements, memory constraints, and personal preference regarding fine-grained control or convenience.

Related benchmarks:

Comparing deep cloning methods (small object): 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):