Benchmark: structuredClone vs spread object

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 };

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lodash cloneDeep
Spread operator

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 16 days ago)

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 146 on Android

View result in a separate tab

Test name	Executions per second
Lodash cloneDeep	174559.6 Ops/sec
Spread operator	25112308.0 Ops/sec

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

LLMs can make mistakes. Check important info.

I'd be happy to explain the provided benchmark and its various components.

**Benchmark Overview**

The provided benchmark compares two approaches for creating a copy of an object: `structuredClone` (also known as "structured clone") and the spread operator (`{ ...voucher }`). The goal is to determine which approach is faster.

**Test Case 1: Lodash cloneDeep**

In this test case, the benchmark definition is:
```javascript
const copy = window.structuredClone(voucher);
```
This code uses the `structuredClone` function from the Web APIs to create a deep clone of the `voucher` object. The `structuredClone` function is designed to be safe and efficient for cloning complex objects.

**Pros and Cons**

* Pros:
	+ Can handle complex, deeply nested objects
	+ May be more secure than other cloning methods due to its ability to preserve metadata and side effects
* Cons:
	+ Requires a supported browser (Chrome 129 in this case) and the Web APIs
	+ May have performance overhead compared to other cloning methods

**Test Case 2: Spread Operator**

In this test case, the benchmark definition is:
```javascript
const copy = { ...voucher };
```
This code uses the spread operator to create a shallow clone of the `voucher` object. The spread operator is a concise way to create a new object with copies of all its own enumerable properties.

**Pros and Cons**

* Pros:
	+ Fast and lightweight
	+ Works in most browsers, including older ones
* Cons:
	+ Only creates a shallow clone (i.e., it doesn't preserve metadata or side effects)
	+ May not work correctly for complex, deeply nested objects

**Library: Lodash**

The `structuredClone` function is part of the Web APIs, but it's also available as a polyfill in Lodash. In this benchmark, Lodash is used to provide the `cloneDeep` function, which is essentially equivalent to calling `structuredClone` directly.

**Special JS Feature/ Syntax: Spread Operator**

The spread operator (`{ ...voucher }`) is a new feature introduced in ECMAScript 2018 (ES8). It's a shorthand way to create a new object with copies of all its own enumerable properties. This syntax is widely supported in modern browsers, including Chrome 129.

**Other Alternatives**

Some other ways to clone an object include:

* `JSON.parse(JSON.stringify(voucher))`: This method uses the JSON stringification and parsing process to create a copy of the object. However, it's not recommended for deep cloning due to potential issues with circular references.
* `Object.assign({}, voucher)`: This method creates a shallow clone by copying all enumerable properties from the original object into a new object.
* Manual iteration: You can write your own function to iterate over the properties of an object and create a copy manually. However, this approach is often slower and more error-prone than using a library or built-in functions.

In summary, the provided benchmark compares two approaches for creating a copy of an object: `structuredClone` (using Lodash) and the spread operator. The `structuredClone` function provides a safe and efficient way to create deep clones, but requires a supported browser and may have performance overhead. The spread operator is fast and lightweight, but only creates shallow clones and may not work correctly for complex objects.

Related benchmarks:

structuredClone vs spread object (version: 0)

Comparing performance of: Lodash cloneDeep vs Spread operator

Created: 4 years ago by: Guest

Jump to the latest result

Lodash cloneDeep

Spread operator

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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