Benchmark: > _.cloneDeep() vs JSON.Parse(JSON.stringify()) <

HTML Preparation code:

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>

Script Preparation code:

var testArray = [{
        key1: {
            key3: 'val3-1',
            key4: {
                key5: 'val4-1'
            }
        },
        key2: 'val2-1'
    },
    {
        key1: 'val1-2',
        key2: 'val2-2'
    },
    {
        key1: 'val1-3',
        key2: 'val2-3'
    },
    {
        key1: 'val1-4',
        key2: 'val2-4'
    },
    {
        key1: {
            key3: 'val3-5',
            key4: {
                key5: 'val4-5'
            }
        },
        key2: 'val2-5'
    },
    {
        key1: 'val1-6',
        key2: 'val2-6'
    },
    {
        key1: {
            key3: 'val3-7',
            key4: {
                key5: 'val4-7'
            }
        },
        key2: 'val2-7'
    }
];

Tests:

_.cloneDeep() Test
_.cloneDeep(testArray)
JSON.parse(JSON.stringify()) Test
JSON.parse(JSON.stringify(testArray))

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
_.cloneDeep() Test
JSON.parse(JSON.stringify()) Test

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 116 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
_.cloneDeep() Test	279842.6 Ops/sec
JSON.parse(JSON.stringify()) Test	423993.7 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net!

**Benchmark Definition and Options**

The benchmark is defined as `> _.cloneDeep() vs JSON.Parse(JSON.stringify()) <`, which means we're comparing two options:

1. **Lodash's `_cloneDeep()` function**: This function creates a deep copy of an object, ensuring that all nested objects are also copied.
2. **ES6's `JSON.parse(JSON.stringify())` method**: This method is used to parse a JSON string back into a JavaScript object. However, it has some limitations and potential issues (more on this later).

**Pros and Cons**

1. **Lodash's `_cloneDeep()` function**:
	* Pros: Provides a safe and efficient way to create deep copies of objects.
	* Cons: Requires the use of Lodash, which may add unnecessary overhead for small benchmarks.
2. **ES6's `JSON.parse(JSON.stringify())` method**:
	* Pros: Simple and straightforward implementation.
	* Cons: Has limitations due to its inability to handle certain types of nested objects (e.g., those with `null` or `undefined` keys).

**Library Usage**

The benchmark uses Lodash, a popular JavaScript library that provides utility functions for tasks like array manipulation, object creation, and more. In this case, `_cloneDeep()` is used to create deep copies of the test data.

**Special JS Features and Syntax**

There are no special JS features or syntax specific to this benchmark, but it's worth noting that MeasureThat.net often tests modern JavaScript features, such as ES6 and later.

**Other Considerations**

When working with complex objects in JavaScript, the choice between `_cloneDeep()` and `JSON.parse(JSON.stringify())` can be crucial. Here are some additional considerations:

* **Performance**: In general, `_cloneDeep()` is faster than `JSON.parse(JSON.stringify())`, especially for large datasets.
* **Memory Safety**: If you're working with objects that contain functions or other types of values that need to be executed, `_cloneDeep()` provides a safer option to ensure that the copied object does not execute these values prematurely.

**Other Alternatives**

If you were to rewrite this benchmark using alternative approaches, here are some options:

1. **Immutable.js**: This library provides immutable data structures and functions for creating copies of objects.
2. **Spread operator (`...`)**: You can use the spread operator to create shallow copies of objects or arrays.
3. **Recursion**: If you're comfortable with recursion, you could write a custom function to clone deep objects using recursive calls.

Keep in mind that these alternatives may have different trade-offs in terms of performance, memory usage, and code readability.

Related benchmarks:

> _.cloneDeep() vs JSON.Parse(JSON.stringify()) < (version: 0)

Lodash vs ES6 비교

Comparing performance of: _.cloneDeep() Test vs JSON.parse(JSON.stringify()) Test

Created: one year ago by: Registered User

Jump to the latest result

_.cloneDeep() Test

JSON.parse(JSON.stringify()) Test

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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