Benchmark: structuredClone vs spread

Script Preparation code:

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

Tests:

structuredClone()
const newObj = structuredClone(voucher)
spread syntax
const newObj = {...voucher}

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
structuredClone()
spread syntax

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36

Browser/OS: Chrome 124 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
structuredClone()	612998.4 Ops/sec
spread syntax	14843721.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

**Benchmark Overview**

The benchmark compares two approaches: using `structuredClone()` and using the spread syntax (`{...voucher}`). The test aims to measure which approach is faster for cloning an object in JavaScript.

**Options Compared**

There are two options being compared:

1. **`structuredClone(voucher)`**: This method creates a deep copy of the `voucher` object using the `structuredClone()` function, which is a relatively new function introduced in ECMAScript 2020.
2. **Spread syntax (`{...voucher}`)**: This approach uses the spread operator to create a shallow copy of the `voucher` object.

**Pros and Cons**

* **`structuredClone(voucher)`**:
	+ Pros:
		- Creates a deep copy of the object, which is often necessary in JavaScript applications.
		- More explicit and readable than the spread syntax.
	+ Cons:
		- Requires support for ECMAScript 2020 or later, which may not be the case for older browsers or environments.
* **Spread syntax (`{...voucher}`)**:
	+ Pros:
		- Widely supported across modern browsers and environments.
		- Creates a shallow copy of the object, which is often sufficient in many cases.
	+ Cons:
		- May not create a deep copy if the original object has circular references.

**Library Used**

None. The benchmark does not use any external libraries to perform the cloning operation.

**Special JavaScript Feature or Syntax**

* **`structuredClone()`**: This function was introduced in ECMAScript 2020 as a way to create a deep copy of an object while preserving its metadata and reference counting information. It is supported in modern browsers and Node.js environments.
* **Spread syntax (`{...voucher}`)**: The spread operator is a widely supported feature in JavaScript, but it creates a shallow copy of the object by iterating over its properties and creating new objects with the same values.

**Other Alternatives**

If you need to clone an object in JavaScript, there are other alternatives:

* **`JSON.parse(JSON.stringify(voucher))`**: This method creates a deep copy of the object by converting it to a JSON string and then parsing it back into an object.
* **`Object.assign()`: This method can be used to create a shallow copy of an object by assigning its properties to a new object.

However, these alternatives may not provide the same level of performance or semantic guarantees as `structuredClone()` for deep copying objects.

Related benchmarks:

structuredClone vs spread (version: 0)

Comparing performance of: structuredClone() vs spread syntax

Created: 3 years ago by: Guest

Jump to the latest result

structuredClone()

spread syntax

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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