Benchmark: spread vs structureClone

HTML Preparation code:

<!--your preparation HTML code goes here-->

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:

structuredClone
const copy = structuredClone(voucher)
spread
const copy = { ...voucher }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
structuredClone
spread

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 144 on Windows

View result in a separate tab

Test name	Executions per second
structuredClone	154967.5 Ops/sec
spread	19358676.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

LLMs can make mistakes. Check important info.

### Benchmark Overview

This benchmark compares the performance of two JavaScript methods for creating a shallow copy of an object: the spread operator (`{ ...voucher }`) and the `structuredClone` function (`structuredClone(voucher)`).

### Test Cases

1. **Test Name: structuredClone**
   - **Benchmark Definition:** `const copy = structuredClone(voucher)`
   - **Library/Feature Used:** `structuredClone` is a built-in JavaScript function introduced in the HTML Living Standard and widely in modern JavaScript environments. Its purpose is to create a deep copy of a JavaScript object, handling complex types like nested objects and arrays seamlessly.
   - **Pros:**
     - Creates deep copies, which is beneficial for objects that contain nested structures or non-primitive data types (such as Maps, Sets, and Dates).
     - Handles cyclic references without throwing an error.
   - **Cons:**
     - May perform slower for simple objects due to the additional overhead of deep copying rather than a shallow copy.
     - Not available in all environments, particularly older browsers or JavaScript engines that do not support this feature.

2. **Test Name: spread**
   - **Benchmark Definition:** `const copy = { ...voucher }`
   - **Feature Used:** The spread syntax (`...`) is a feature of ES6 (ECMAScript 2015) that allows an iterable (e.g., an array or object) to be expanded into its elements.
   - **Pros:**
     - Quick and easy syntax for creating shallow copies of objects.
     - Generally faster than `structuredClone` for creating copies of simple objects, as it does not have the overhead of deep copying.
   - **Cons:**
     - Only creates shallow copies, meaning that nested objects are still referenced. If they change, both the original and copied object will reflect this change.
     - Cannot handle complex structures like Dates or instances of custom classes, which will not behave as expected in the copied object.

### Performance Results

The benchmark results show a significant difference in performance:
- The spread operator achieved **34,831,788** executions per second.
- The `structuredClone` function achieved **306,444.53** executions per second.

This indicates that for simple object copying, the spread operator is vastly superior in performance. However, if the object being copied contains nested structures, the `structuredClone` method's ability to deep copy those structures becomes invaluable, despite its performance drawbacks.

### Considerations and Alternatives

- **Shallow vs. Deep Copy:** Understanding the distinction between how data is copied (shallow vs. deep) is critical when deciding which method to use. If you only need to copy the top level of an object and there are no nested references of concern, the spread operator is likely preferable due to its speed.
  
- **Other Alternatives:**
  - **Object.assign:** Another way to perform a shallow copy is using `Object.assign({}, voucher)`. It's similar in functionality to the spread operator with slightly different syntax and may have different performance characteristics.
  - **Lodash or other Utility Libraries:** Libraries like Lodash provide functions such as `_.cloneDeep` for deep copying, if you need to deal with complex structures in a more controlled manner. While powerful, using external libraries can influence bundle size and performance.
  
In summary, the choice between using `structuredClone` and the spread operator (or alternatives) should carefully consider the nature of the object being copied and the trade-offs between performance and the need for deep vs. shallow copies.

Related benchmarks:

spread vs structureClone (version: 1)

Comparing performance of: structuredClone vs spread

Created: one year ago by: Guest

Jump to the latest result

structuredClone

spread

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):