Benchmark: cloneDeep VS spread vs stringify

Script Preparation code:

sourceO = {
    foo: 42,
    bar: {
        list: [0, 1, 2, 3],
        text: 'hello'
    },
    biz: {
        nest: {
            nest: {
                nest: {
                    a: 42,
                    b: 12
                }
            }
        }
    }
};

stringyClone = o => JSON.parse(JSON.stringify(o));

Tests:

spread
const copySpread = { ...sourceO, nest: {nest: {nest: {...sourceO.biz.nest.nest.nest, b: 42}}}};
cloneDeep
let copyCloneDeep = _.cloneDeep(sourceO); copyCloneDeep.biz.nest.nest.nest.b = 42;
stringyClone
let copyStringyClone = stringyClone(sourceO); copyStringyClone.biz.nest.nest.nest.b = 42;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
spread
cloneDeep
stringyClone

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/109.0.0.0 Safari/537.36

Browser/OS: Chrome 109 on Windows

View result in a separate tab

Test name	Executions per second
spread	1666544.0 Ops/sec
cloneDeep	356380.2 Ops/sec
stringyClone	411372.8 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 Overview**

The benchmark compares three methods for creating a deep copy of an object: `spread`, `cloneDeep` (using Lodash), and `stringyClone` (using JSON.parse and JSON.stringify). The input object, `sourceO`, is a complex nested structure with various properties, including arrays and objects.

**Options Compared**

The benchmark tests the following options:

1. **Spread**: This method uses the spread operator (`{...sourceO}`) to create a shallow copy of the `sourceO` object. However, when used in conjunction with nested objects, it only creates a reference to the original object.
2. **cloneDeep** (Lodash): This method uses Lodash's `cloneDeep` function to create a deep copy of the `sourceO` object.
3. **stringyClone**: This method uses `JSON.parse` and `JSON.stringify` to create a deep copy of the `sourceO` object.

**Pros and Cons**

Here are some pros and cons for each approach:

1. **Spread**:
	* Pros: Simple, fast, and widely supported.
	* Cons: Only creates a shallow copy, which can lead to unexpected behavior when dealing with nested objects.
2. **cloneDeep** (Lodash):
	* Pros: Creates a deep copy of the object, handling nested objects correctly.
	* Cons: Requires Lodash library, which may not be included in all environments.
3. **stringyClone**:
	* Pros: Creates a deep copy of the object and handles nested objects correctly.
	* Cons: Uses `JSON.parse` and `JSON.stringify`, which can be slower than other methods.

**Library Used**

The benchmark uses Lodash's `cloneDeep` function, which is a popular utility library for JavaScript. It provides a range of functions for working with data structures, including deep cloning.

**Special JS Features or Syntax**

None of the benchmarks use any special JavaScript features or syntax that would require additional explanation.

**Other Considerations**

When dealing with complex data structures, it's essential to consider the following:

* **Shallow vs. Deep Copy**: As mentioned earlier, `spread` only creates a shallow copy, while `cloneDeep` and `stringyClone` create deep copies.
* **Performance**: The benchmark shows that `stringyClone` is slightly slower than `cloneDeep`, but both are faster than `spread`.
* **Library Dependence**: Using libraries like Lodash can add complexity to your codebase. Make sure to weigh the benefits against the potential drawbacks.

**Alternatives**

If you're interested in exploring alternative methods for creating deep copies, consider the following:

1. **Object.assign()**: This method creates a shallow copy of an object.
2. **Array.prototype.slice()**: This method creates a shallow copy of an array.
3. **JSON.parse(JSON.stringify(obj))**: This method creates a deep copy of an object.

Keep in mind that each approach has its pros and cons, and the choice ultimately depends on your specific use case and requirements.

Related benchmarks:

cloneDeep VS spread vs stringify (version: 0)

Comparing performance of: spread vs cloneDeep vs stringyClone

Created: 4 years ago by: Guest

Jump to the latest result

spread

cloneDeep

stringyClone

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