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>

AخA
 
<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;

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
Lodash cloneDeep
Native structuredClone
JSON Parse

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 133 on Windows

View result in a separate tab

Test name	Executions per second
Lodash cloneDeep	128500.2 Ops/sec
Native structuredClone	108825.9 Ops/sec
JSON Parse	135767.5 Ops/sec

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

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:

Lodash cloneDeep: This method uses the _.cloneDeep() function from the Lodash library to create a deep copy of the input object.
Native structuredClone: This method uses the structuredClone() function, which is a native JavaScript API introduced in ECMAScript 2020.
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:

Lodash cloneDeep:
- Pros: Widely supported, easy to use, and well-maintained.
- Cons: Adds an external dependency (Lodash), which might increase bundle size and complexity.
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.
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:

Array.prototype.slice().concat(): Not recommended for deep cloning; suitable only for shallow cloning.
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.

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.

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 4 months ago):