Benchmark: structuredClone vs spread vs parse

Script Preparation code:

var voucher = {
    "single": false,
    "applyOverTaxes": false,
    "discountType": "1",
    "value": 100,
    "minimumAmount": 0,
    "quantity": 1,
    "suffixLength": 8,
    "code": "IF5R0AFX",
    "vertical": [],
    "allowedPaymentMethods": [],
    "allowedBanks": [],
    "types": [],
    "partners": [],
    "startDate": "2020-10-21T00:00:00.000Z",
    "endDate": "2020-10-21T00:00:00.000Z",
    "applyed": false
}

Tests:

structuredClone
const copy = window.structuredClone(voucher);
Spread
const copy = { ...voucher };
Json
const copy = JSON.parse(JSON.stringify(voucher))

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
structuredClone
Spread
Json

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's dive into the explanation of the provided benchmark.

**Benchmark Overview**

The benchmark measures the performance of three methods for creating a deep copy of an object: `structuredClone`, spread operator (`{ ... }`), and `JSON.parse(JSON.stringify())`. The test case uses a predefined JSON object called `voucher` that contains various properties, including nested objects and arrays.

**Options Compared**

The benchmark compares the performance of the following options:

1. **structuredClone**: A new method introduced in ECMAScript 2020 (JavaScript version 2020+) for creating a deep copy of an object.
2. **Spread Operator (`{ ... }`)**: A shorthand way to create a new object by spreading the properties of an existing object.
3. **JSON.parse(JSON.stringify())**: A method that uses JSON serialization and deserialization to create a deep copy of an object.

**Pros and Cons**

Here's a brief overview of each option:

1. **structuredClone**
	* Pros: Efficient, modern, and supported by most modern browsers and Node.js versions.
	* Cons: Not widely supported yet (JavaScript version 2020+ only), might be slower than other methods due to the additional overhead of creating a new object.
2. **Spread Operator (`{ ... }`)**
	* Pros: Wide support across browsers and Node.js versions, easy to implement, and fast performance.
	* Cons: Might not work as expected with complex or deeply nested objects, can be slower than `structuredClone` for very large objects due to the creation of multiple intermediate objects.
3. **JSON.parse(JSON.stringify())**
	* Pros: Widely supported across browsers and Node.js versions, works well with complex objects.
	* Cons: Can be slower than other methods, especially for large objects, as it involves additional serialization and deserialization steps.

**Library or Special JS Feature**

In this benchmark, there is no library used explicitly. However, the `structuredClone` method relies on the implementation of the `JSON` object in JavaScript engines to create a deep copy of an object. The spread operator (`{ ... }`) is also implemented natively in most browsers and Node.js versions.

**Other Considerations**

When choosing a method for creating a deep copy of an object, consider factors such as:

* Performance: `structuredClone` might be the best choice if you need high performance and are using modern JavaScript versions. The spread operator can be faster for small to medium-sized objects.
* Compatibility: If you need to support older browsers or Node.js versions, the spread operator or `JSON.parse(JSON.stringify())` might be a better choice.

**Alternatives**

If you're not comfortable with the spread operator or don't want to use modern JavaScript versions, consider the following alternatives:

1. **Lodash's `cloneDeep()`**: A popular library that provides a deep copy function for objects.
2. **JSON.parse(JSON.stringify())**: As mentioned earlier, this method is widely supported and can be used to create a deep copy of an object.
3. **For...of loop with Object.assign()**: Another way to create a deep copy of an object by using the `Object.assign()` method.

Keep in mind that these alternatives might have different performance characteristics or compatibility issues compared to the methods used in this benchmark.

Related benchmarks:

structuredClone vs spread vs parse (version: 0)

Comparing performance of: structuredClone vs Spread vs Json

Created: 3 years ago by: Guest

Jump to the latest result

structuredClone

Spread

Json

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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