Benchmark: structuredClone vs spread syntax

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:

window.structuredClone
const copy = window.structuredClone(voucher);
Spread syntax
const copy = { ...voucher };

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
window.structuredClone
Spread syntax

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

Browser/OS: Chrome 135 on Windows

View result in a separate tab

Spread syntax

34.9M/s

window.structuredClone

434K/s

View exact numbers

Test name	Executions per second
✓ Spread syntax	34,911,496 Ops/sec
window.structuredClone	433,503 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 on MeasureThat.net.

**Benchmark Overview**

The benchmark compares two approaches to create a copy of an object in JavaScript: `structuredClone` and spread syntax (`{ ...voucher }`). The goal is to determine which approach is faster, more efficient, or both.

**Options Compared**

There are two options being compared:

1. **`window.structuredClone(voucher)`**: This method uses the `structuredClone` function, introduced in JavaScript 2020, to create a deep copy of the object `voucher`. The `structuredClone` function is designed to produce an exact clone of the original object, including its internal properties and references.
2. **Spread syntax (`{ ...voucher }`)**: This method uses the spread operator (`...`) to create a shallow copy of the object `voucher`. The resulting object will have all the same properties as the original object, but any nested objects or arrays may not be copied recursively.

**Pros and Cons**

* **`structuredClone(voucher)`**:
	+ Pros: Produces an exact clone of the original object, including internal properties and references. This can be useful in scenarios where preserving the original structure is crucial.
	+ Cons: May be slower than spread syntax due to the overhead of creating a deep copy.
* **Spread syntax (`{ ...voucher }`)**:
	+ Pros: Faster than `structuredClone` because it only creates a shallow copy, which requires less work.
	+ Cons: Does not preserve internal properties and references, so changes made to nested objects or arrays may affect the original object.

**Library/Feature**

There is no library being used in this benchmark. However, `structuredClone` is a built-in JavaScript feature introduced in 2020, making it a part of the language itself.

**Special JS Feature/Syntax**

The benchmark uses the `structuredClone` function, which was introduced as a proposed feature in ECMAScript 2020 and later adopted as a standard. The spread syntax (`{ ...voucher }`) is also a built-in JavaScript feature that has been available since ECMAScript 2015.

**Other Alternatives**

If you're interested in exploring other approaches to create copies of objects, here are some alternatives:

* Using the `JSON.parse(JSON.stringify(voucher))` method (shallow copy)
* Using a library like Lodash's `cloneDeep()` function (deep copy)
* Using a recursive function to manually clone the object (custom implementation)

Keep in mind that each approach has its own trade-offs and may not be suitable for all use cases.

I hope this explanation helps you understand the benchmark and the options being compared!

structuredClone vs spread syntax (version: 0)

Comparing performance of: `window.structuredClone vs Spread syntax`

Created: 3 years ago by: Guest

Go to the latest result

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

structuredClone vs spread syntax (version: 0)

Comparing performance of: window.structuredClone vs Spread syntax

Created: 3 years ago by: Guest

Go to the latest result

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

Related benchmarks

Comparing performance of: `window.structuredClone vs Spread syntax`