Benchmark: Lodash cloneDeep vs structuredClone vs JSON.stringify with array values

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...'
    },
    arrayOfValues: [
        'asdf',
        123,
        {
            bob: 's your uncle',
            nestedArray: [123, 333, {
                prop: 123
            }, ]
        },

    ]
};

var myCopy = null;

Tests:

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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 111 on Windows

View result in a separate tab

Test name	Executions per second
Lodash cloneDeep	176849.0 Ops/sec
Native structuredClone	106550.2 Ops/sec
JSON.stringify	168137.0 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 world of JavaScript microbenchmarks on MeasureThat.net.

**Benchmark Definition**

The benchmark tests three different approaches to create a deep copy of an object: Lodash `cloneDeep`, `structuredClone` (a native Web API), and `JSON.stringify` with array values. The test object, `MyObject`, is a complex nested structure containing various types of values, including numbers, booleans, objects, and arrays.

**Options Compared**

1. **Lodash `cloneDeep`**: Lodash's `cloneDeep` function creates a deep copy of the input object, recursively copying all its properties and handling circular references.
2. **Native `structuredClone`**: The `structuredClone` API is a new Web API introduced in Chrome 90 and Firefox 85. It provides a way to create a shallow or deep clone of an object, depending on the context, while maintaining the original object's property names.
3. **`JSON.stringify` with array values**: This approach uses the `JSON.stringify()` method to convert the input object into a JSON string and then parses it back into an object using `JSON.parse()`. However, this method only works for shallow copies of objects, not deep ones.

**Pros and Cons**

1. **Lodash `cloneDeep`**:
	* Pros: Handles circular references, creates a deep copy, reliable.
	* Cons: Requires the Lodash library, may be slower due to its overhead.
2. **Native `structuredClone`**:
	* Pros: Fast, efficient, handles circular references, and is part of the Web API.
	* Cons: Limited support (only Chrome 90+ and Firefox 85+), may not work as expected for complex objects.
3. **`JSON.stringify` with array values**:
	* Pros: Lightweight, works with shallow copies, and is widely supported.
	* Cons: Only creates a shallow copy, fails to handle circular references or nested objects.

**Library and Purpose**

Lodash's `cloneDeep` function is a utility function that helps create deep copies of complex objects. It recursively traverses the object graph, cloning all properties and handling any potential issues with circular references.

**Special JS Feature or Syntax (None)**

There are no special JavaScript features or syntax used in this benchmark.

**Other Considerations**

When dealing with deep object copying, it's essential to consider performance, memory usage, and edge cases like circular references. In this benchmark, `structuredClone` offers a good balance between speed and reliability, but its limited support is a drawback.

If you're working with objects that need deep copying, consider using Lodash's `cloneDeep` or the native `structuredClone` API if supported by your browser. For shallow copies or when lightweight solutions are necessary, `JSON.stringify` with array values might be suitable.

Related benchmarks:

Lodash cloneDeep vs structuredClone vs JSON.stringify with array values (version: 0)

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

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

Created: one year ago by: Guest

Jump to the latest result

Lodash cloneDeep

Native structuredClone

JSON.stringify

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