Benchmark: structuredClone vs spread object 2

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 = 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: 10 days ago)

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

Browser/OS: Chrome 146 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Lodash cloneDeep	655320.4 Ops/sec
Spread operator	39140608.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 Overview**

The benchmark compares two approaches to create a deep copy of an object: `structuredClone` and the spread operator (`{ ...voucher }`). The test case uses a specific JavaScript object, `voucher`, which represents a voucher with various properties.

**Structured Clone**

The `structuredClone` function is a relatively new addition to JavaScript, introduced in ECMAScript 2022. It allows creating a deep copy of an object while preserving its structure and references.

In the benchmark, `structuredClone(voucher)` creates a deep copy of the `voucher` object using this function.

**Spread Operator**

The spread operator (`{ ...voucher }`) is another way to create a shallow copy of an object. It does not preserve the object's structure or references.

In the benchmark, `{ ...voucher }` creates a shallow copy of the `voucher` object using this operator.

**Comparison and Pros/Cons**

The test case compares the performance of both approaches on different browsers and platforms. Here are some pros and cons for each approach:

* **Structured Clone**
	+ Pros:
		- Preserves the object's structure and references, making it suitable for deep copying.
		- Can be faster than shallow copying methods like spread operators or `Object.assign()`.
	+ Cons:
		- Only available in ECMAScript 2022 and later versions.
		- May have performance overhead due to its complex implementation.
* **Spread Operator**
	+ Pros:
		- Easy to use and understand.
		- Shallow copying is often sufficient for many use cases.
	+ Cons:
		- Does not preserve the object's structure or references, which can lead to unexpected behavior in some scenarios.

**Library and Special JS Features**

* `structuredClone` is a built-in JavaScript function introduced in ECMAScript 2022. No library is required to use it.
* The spread operator (`{ ...voucher }`) is also a built-in JavaScript feature, supported since ECMAScript 2015.

**Other Alternatives**

If you need to create deep copies of objects and want alternatives to `structuredClone`, consider:

1. **`Object.assign()`**: While not as efficient as `structuredClone`, `Object.assign()` can be used to create a shallow copy of an object.
2. **Lodash's `cloneDeep()`**: This function is a popular alternative for deep copying objects, but it requires the Lodash library.

In summary, `structuredClone` offers a convenient and efficient way to create deep copies of objects, while the spread operator provides a simpler, though less robust, alternative for shallow copying.

Related benchmarks:

structuredClone vs spread object 2 (version: 0)

Comparing performance of: Lodash cloneDeep vs Spread operator

Created: 2 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):