Benchmark: Lodash cloneDeep vs structuredClone vs JSON-JSON

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...'
  },
  nesting: {
    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...'
    },
    nesting: {
      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...'
      },
      nesting: {
        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 cloneDeep
myCopy = _.cloneDeep(MyObject);
Native structuredClone
myCopy = structuredClone(MyObject);
JSON.stringify(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.stringify(JSON.parse())

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Opera 118 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Lodash cloneDeep	584812.8 Ops/sec
Native structuredClone	394425.9 Ops/sec
JSON.stringify(JSON.parse())	593983.3 Ops/sec

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

LLMs can make mistakes. Check important info.

The provided JSON represents a JavaScript benchmark test case for comparing the performance of three different methods: Lodash's `cloneDeep`, the native `structuredClone` API, and `JSON.stringify(JSON.parse())`.

**Test Cases**

1. **Lodash cloneDeep**: This method uses Lodash's `cloneDeep` function to create a deep copy of the input object `MyObject`. The `cloneDeep` function recursively clones all properties of the object, including nested objects and arrays.
2. **Native structuredClone**: This method uses the native `structuredClone` API (introduced in ECMAScript 2022) to create a deep copy of the input object `MyObject`. The `structuredClone` function is specifically designed for cloning complex data structures and can handle cycles more efficiently than other methods.
3. **JSON.stringify(JSON.parse())**: This method uses a combination of `JSON.stringify()` and `JSON.parse()` to create a deep copy of the input object `MyObject`. First, `JSON.stringify()` converts the object into a JSON string, and then `JSON.parse()` parses that string back into an object.

**Comparison**

The pros and cons of each approach are:

* **Lodash cloneDeep**: Pros:
	+ Well-tested and widely used library
	+ Efficient for simple objects but may be slower for complex structures
Cons:
	+ Additional dependency on Lodash library
	+ May not handle cycles as efficiently as native `structuredClone`
* **Native structuredClone**: Pros:
	+ Optimized for performance and cycle detection
	+ Handles complex data structures more efficiently than Lodash cloneDeep
Cons:
	+ Limited browser support (only available in ECMAScript 2022 and later)
	+ May not be as widely understood or tested as other methods
* **JSON.stringify(JSON.parse())**: Pros:
	+ Wide browser support
	+ Simple to understand and implement
Cons:
	+ May be slower than native `structuredClone` due to the overhead of converting to a string and back to an object
	+ Can lead to performance issues with large or complex data structures

**Other Considerations**

* When dealing with nested objects, Lodash cloneDeep may create a new copy of each property individually, whereas native `structuredClone` can handle cycles more efficiently by recursively cloning only the top-level object.
* The use of `JSON.stringify(JSON.parse())` assumes that the input object is safe to serialize and deserialize. If the object contains cycles or other problematic data structures, this method may fail.

**Alternative Methods**

If none of these methods are suitable for your use case, you can also consider using:

* `Object.assign()` with a custom clone function: This method can be used to create a deep copy of an object by recursively cloning its properties.
* A custom clone function using `Array.prototype.map()`: This method can be used to create a deep copy of an array or object by recursively cloning its elements.

However, keep in mind that these alternative methods may not be as efficient or widely supported as the methods mentioned above.

Related benchmarks:

Lodash cloneDeep vs structuredClone vs JSON-JSON (version: 0)

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

Comparing performance of: Lodash cloneDeep vs Native structuredClone vs JSON.stringify(JSON.parse())

Created: one year ago by: Guest

Jump to the latest result

Lodash cloneDeep

Native structuredClone

JSON.stringify(JSON.parse())

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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