Benchmark: structuredClone vs spread vs Object.assign 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 };
Object assign
const copy = {}; Object.assign(copy, voucher)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
window.structuredClone
Spread syntax
Object assign

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:122.0) Gecko/20100101 Firefox/122.0

Browser/OS: Firefox 122 on Windows

View result in a separate tab

Test name	Executions per second
window.structuredClone	567692.6 Ops/sec
Spread syntax	7433920.0 Ops/sec
Object assign	27664068.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested.

**Benchmark Definition**

The benchmark is comparing three different approaches to create a copy of an object in JavaScript:

1. `window.structuredClone(voucher)`
2. `{ ...voucher }` (Spread syntax)
3. `Object.assign(copy, voucher)` (Object assign)

**Library and Purpose**

`structuredClone` is a new JavaScript method introduced in ECMAScript 2020, which allows creating a shallow clone of an object. It's designed to be more efficient and flexible than traditional methods like `Object.assign()` or the spread syntax.

**Options Compared**

The benchmark compares three options:

1. **`window.structuredClone(voucher)`**: This method creates a shallow clone of the `voucher` object using the new `structuredClone` function.
2. **{ ...voucher } (Spread syntax)**: This approach uses the spread operator (`...`) to create a shallow copy of the `voucher` object.
3. **Object.assign(copy, voucher) (Object assign)**: This method creates a shallow clone of the `voucher` object by assigning its properties to a new object using `Object.assign()`.

**Pros and Cons**

Here's a brief summary of each approach:

1. **`window.structuredClone(voucher)`**
	* Pros:
		+ Designed for efficiency and flexibility
		+ Handles circular references more effectively than traditional methods
	* Cons:
		+ Not yet widely supported in older browsers (pre-ECMAScript 2020)
2. **{ ...voucher } (Spread syntax)**
	* Pros:
		+ Simple and concise syntax
		+ Works in most modern browsers
	* Cons:
		+ May not handle circular references well
		+ Can be slower than `structuredClone` for large objects
3. **Object.assign(copy, voucher) (Object assign)**
	* Pros:
		+ Widely supported in older browsers
		+ Easy to understand and use
	* Cons:
		+ May not handle circular references well
		+ Can be slower than `structuredClone` for large objects

**Other Considerations**

When choosing an approach, consider the specific requirements of your project:

* **Performance**: If you need optimal performance, `structuredClone` might be a better choice.
* **Browser Support**: If you need to support older browsers, use the spread syntax or `Object.assign()`.
* **Circular References**: If you work with objects that contain circular references, `structuredClone` is likely a better option.

**Alternatives**

Other alternatives for creating object copies include:

1. **JSON.parse(JSON.stringify(voucher))**: This method creates a shallow clone of an object using JSON parsing and stringification.
2. **Array.prototype.slice.call(Object.assign({}, voucher))**: This approach uses `Object.assign()` to create a new object, then converts it to an array using `slice.call()`.
3. **lodash.cloneDeep()**: This is a popular utility library that provides a flexible and efficient way to clone objects.

Keep in mind that these alternatives may have different trade-offs and performance characteristics compared to the approaches tested in this benchmark.

Related benchmarks:

structuredClone vs spread vs Object.assign syntax (version: 0)

Comparing performance of: window.structuredClone vs Spread syntax vs Object assign

Created: 2 years ago by: Guest

Jump to the latest result

window.structuredClone

Spread syntax

Object assign

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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