Benchmark: structuredClone vs spread object vs json

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:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lodash cloneDeep
Spread operator
Json stringify

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its options.

**Benchmark Definition**
The benchmark is designed to compare three methods for cloning or copying a JavaScript object: `structuredClone`, the spread operator (`{ ... }`), and `JSON.stringify()` followed by `JSON.parse()`. The goal is to measure which method provides the fastest execution time for a given object.

**Options Compared**

1. **Structured Clone**: This method uses the `structuredClone()` function, which was introduced in ECMAScript 2022. It creates a deep clone of an object by recursively copying all own properties and their values.
	* Pros: Efficient, fast, and modern.
	* Cons: Only available in modern browsers and JavaScript engines (e.g., V8).
2. **Spread Operator**: This method uses the spread operator (`{ ... }`) to create a shallow copy of an object by only copying its own enumerable properties.
	* Pros: Fast, widely supported, and easy to use.
	* Cons: Only creates a shallow copy, which means it may not work correctly for objects with circular references or deeply nested properties.
3. **JSON Stringify + JSON Parse**: This method uses `JSON.stringify()` to convert the object to a string, followed by `JSON.parse()` to recreate the object from the string.
	* Pros: Widely supported and easy to use, but can be slower than other methods due to the conversion overhead.
	* Cons: May not work correctly for objects with circular references or deeply nested properties.

**Library**
None of these options rely on external libraries. The `structuredClone()` function is a built-in method in modern JavaScript engines, while the spread operator and `JSON.stringify()`/`JSON.parse()` are part of the standard library.

**Special JS Feature/Syntax**
The benchmark uses modern JavaScript features, specifically:

* **Structured Clone**: Introduced in ECMAScript 2022.
* **Spread Operator**: Widely supported since ECMAScript 2015.

**Other Alternatives**

If you need to clone or copy a JavaScript object and the above options are not suitable for your use case, consider these alternatives:

* **Lodash.cloneDeep()**: A popular library that provides a deep cloning function. It's widely used but adds extra overhead due to its dependency on Lodash.
* **Object.assign()**: Another method for creating a shallow copy of an object. While it's fast and widely supported, it may not work correctly for objects with circular references or deeply nested properties.

In conclusion, the benchmark provides a useful comparison of three methods for cloning or copying JavaScript objects, highlighting the trade-offs between speed, simplicity, and feature support.

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

Browser/OS: Chrome 114 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Lodash cloneDeep	485978.8 Ops/sec
Spread operator	16352668.0 Ops/sec
Json stringify	737875.7 Ops/sec

Related benchmarks:

structuredClone vs spread object vs json (version: 0)

Comparing performance of: Lodash cloneDeep vs Spread operator vs Json stringify

Created: one year ago by: Guest

Jump to the latest result

Lodash cloneDeep

Spread operator

Json stringify

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