Benchmark: Standard structuredClone vs spread operator

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

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: 6 months ago)

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

Browser/OS: Chrome 142 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Lodash cloneDeep	831044.1 Ops/sec
Spread operator	57935120.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 defined in two parts:

1. **Script Preparation Code**: This section contains the JavaScript code that prepares the test data. In this case, it defines an object `voucher` with various properties. The property values are set to create a specific value.
2. **Html Preparation Code**: This section is empty, which means no HTML code is used for benchmarking.

**Individual Test Cases**

The benchmark consists of two individual test cases:

1. **Lodash cloneDeep**: This test case uses the `structuredClone` function from the `window` object to create a deep copy of the `voucher` object. The `structuredClone` function is not built-in and is part of the WebAssembly Text Format (WASM) specification.
2. **Spread Operator**: This test case uses the spread operator (`{ ...voucher }`) to create a shallow copy of the `voucher` object.

**What's being tested?**

The benchmark tests the performance difference between two approaches for cloning an object in JavaScript:

1. **Structured Clone**: The `structuredClone` function, which is not built-in but is part of the WASM specification.
2. **Spread Operator**: A popular and widely supported way to create a shallow copy of an object.

**Options Compared**

The benchmark compares these two approaches to see which one performs better in terms of execution speed.

**Pros and Cons**

Here's a brief summary:

* **Structured Clone**:
	+ Pros: Efficient, built-in equivalent (if implemented) or can be compiled to WASM.
	+ Cons: Not widely supported, requires specific implementation.
* **Spread Operator**:
	+ Pros: Widely supported, easy to implement, and efficient for shallow copies.
	+ Cons: May not work as expected with deep objects or complex data structures.

**Library and Purpose**

The `structuredClone` function is part of the WebAssembly Text Format (WASM) specification. Its purpose is to create a deep copy of an object, allowing for safe and efficient sharing of data between WASM modules and JavaScript environments.

**Special JS Feature/Syntax**

There are no special JavaScript features or syntax mentioned in this benchmark. The focus is on comparing two established approaches for cloning objects.

**Alternatives**

Other alternatives for cloning objects in JavaScript include:

* Using the `Object.assign()` method with a callback function.
* Implementing a custom clone function using recursion or iteration.
* Using libraries like Lodash or Immutable.js, which provide built-in deep copying functions.

Related benchmarks:

Standard structuredClone vs spread operator (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):