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

Historical Performance Data aggregated from 275 community runs

Desktop Results:

Chrome 215 runs

Spread operator

17.8M/s

Lodash cloneDeep

427K/s

Fastest: Spread operator (41.6x faster)

View exact numbers

✓ Spread operator: 17,752,360 ops/sec
• Lodash cloneDeep: 426,622 ops/sec

Firefox 43 runs

Spread operator

5.5M/s

Lodash cloneDeep

427K/s

Fastest: Spread operator (12.9x faster)

View exact numbers

✓ Spread operator: 5,508,806 ops/sec
• Lodash cloneDeep: 427,075 ops/sec

Mobile Results:

Chrome 17 runs

Spread operator

8.7M/s

Lodash cloneDeep

109K/s

Fastest: Spread operator (79.8x faster)

View exact numbers

✓ Spread operator: 8,725,818 ops/sec
• Lodash cloneDeep: 109,358 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: 2 months 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

Spread operator

25.1M/s

Lodash cloneDeep

175K/s

View exact numbers

Test name	Executions per second
✓ Spread operator	25,112,308 Ops/sec
Lodash cloneDeep	174,560 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.

structuredClone vs spread object (version: 0)

Comparing performance of: `Lodash cloneDeep vs Spread operator`

Created: 4 years ago by: Guest

Go to the latest result

Lodash cloneDeep

Spread operator

Historical Performance Data aggregated from 275 community runs

Desktop Results:

Chrome 215 runs

Firefox 43 runs

Mobile Results:

Chrome 17 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

structuredClone vs spread object (version: 0)

Comparing performance of: Lodash cloneDeep vs Spread operator

Created: 4 years ago by: Guest

Go to the latest result

Lodash cloneDeep

Spread operator

Historical Performance Data aggregated from 275 community runs

Desktop Results:

Chrome 215 runs

Firefox 43 runs

Mobile Results:

Chrome 17 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `Lodash cloneDeep vs Spread operator`