Benchmark: Lodash cloneDeep vs structuredClone vs JSON Parse (deep object)

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...'
  },
  deeper: {
    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...'
    },
    deeper: {
      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...'
      },
      wayWayDown: {
        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...'
        },
        date: new Date(),
        set: new Set([1,2,3,4,5]),
        map: new Map([['a','b'],['c','d']])
      }
    }
  }
};

var myCopy = null;

Tests:

Lodash cloneDeep
myCopy = _.cloneDeep(MyObject);
Native structuredClone
myCopy = structuredClone(MyObject);
JSON Parse
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
JSON Parse

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Measuring the performance of different cloning methods in JavaScript can be a valuable exercise, especially when comparing the efficiency of libraries like Lodash with native implementations.

**Benchmark Definition**

The benchmark defines three test cases:

1. **Lodash cloneDeep**: This method uses the `_.cloneDeep()` function from the Lodash library to create a deep copy of the input object.
2. **Native structuredClone**: This method uses the `structuredClone()` function, which is a native JavaScript API introduced in ECMAScript 2020.
3. **JSON Parse**: This method uses the `JSON.parse(JSON.stringify())` trick to create a deep copy of the input object.

**Options Compared**

The three methods are compared based on their execution time, measured in executions per second (EPS). The benchmarked values indicate that:

* **JSON Parse** has the highest execution rate, followed by **Lodash cloneDeep**, and then **Native structuredClone**.
* **Native structuredClone** is generally faster than both Lodash methods.

**Pros and Cons**

Here's a summary of the pros and cons for each method:

1. **Lodash cloneDeep**:
	* Pros: Widely supported, easy to use, and well-maintained.
	* Cons: Adds an external dependency (Lodash), which might increase bundle size and complexity.
2. **Native structuredClone**:
	* Pros: Native implementation, no additional dependencies required, and potentially more efficient than Lodash methods.
	* Cons: Requires modern browsers or environments supporting ECMAScript 2020.
3. **JSON Parse**:
	* Pros: Lightweight, easy to understand, and widely supported (no external dependencies).
	* Cons: Not as efficient as native implementations or Lodash methods, can lead to performance issues with large inputs.

**Library**

The `structuredClone()` function is a part of the JavaScript standard library, introduced in ECMAScript 2020. Its purpose is to create a deep copy of an object, similar to the other two methods.

**Special JS Features/Syntax**

No special JavaScript features or syntax are used in this benchmark, apart from the use of `structuredClone()`, which is a relatively new feature introduced by the W3C.

**Other Alternatives**

If you need to clone objects in JavaScript and want alternatives to these methods:

1. **Array.prototype.slice().concat()**: Not recommended for deep cloning; suitable only for shallow cloning.
2. **Object.assign() + Array.prototype.slice()**: Can be used for deep cloning, but it's not as efficient or readable as the other methods.

In summary, when working with JavaScript object cloning, you should consider the trade-offs between efficiency, simplicity, and dependency management. Native implementations like `structuredClone()` might be the best choice in modern environments, while Lodash methods provide a familiar interface for those already invested in the library.

Latest run results:

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

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

Browser/OS: Chrome 130 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Lodash cloneDeep	144895.2 Ops/sec
Native structuredClone	170923.5 Ops/sec
JSON Parse	186560.9 Ops/sec

Related benchmarks:

Lodash cloneDeep vs structuredClone vs JSON Parse (deep object) (version: 0)

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

Comparing performance of: Lodash cloneDeep vs Native structuredClone vs JSON Parse

Created: one year ago by: Guest

Jump to the latest result

Lodash cloneDeep

Native structuredClone

JSON Parse

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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