Benchmark: structuredClone vs spread vs Object.assign + more

structuredClone vs spread vs Object.assign + more (version: 0)

Note!: none of these tests actually do the same thing, and the data in the example is simple. consider also using arrays: those are nice. Some of these are shallow, some of these are deep-ish. Data is lost through JSON serialization and back, and more data would be lost in JSON and other methods depending on the data stored.

Comparing performance of: structuredClone() vs spread syntax vs Object.assign vs Object.fromEntries vs JSON vs Cursed Proxy

Created: one year ago by: Registered User

Jump to the latest result

Script Preparation code:

var voucher = {
    "single": false,
    "applyOverTaxes": false,
    "discountType": "1",
    "value": 100,
    "minimumAmount": 0,
    "quantity": 1,
    "suffixLength": 8,
    "code": "IF5R0AFX",
    "vertical": true,
    "allowedPaymentMethods": null,
    "allowedBanks": null,
    "types": undefined,
    "partners": "Many",
    "startDate": "2020-10-21T00:00:00.000Z",
    "endDate": "2020-10-21T00:00:00.000Z",
    "applyed": false
}

Tests:

structuredClone()
var newObj = structuredClone(voucher)
spread syntax
var newObj = {...voucher}
Object.assign
var newObj = Object.assign({}, voucher)
Object.fromEntries
var newObj = Object.fromEntries(Object.entries(voucher))
JSON
// loses the "types" property var newObj = JSON.parse(JSON.stringify(voucher))
Cursed Proxy
// this registers as surprisingly performant for some reason, but keep in mind i didn't benchmark // usage, only creation, so in reality this could potentially not be performant when setting/getting. // either way this is really scuffed so you probably shouldn't take this approach var newObject = new Proxy({}, { get (o, p) { return p in o ? o[p] : o[p] ??= voucher[p] }, set (o, p, v) { o[p] = v; return true } })

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
structuredClone()
spread syntax
Object.assign
Object.fromEntries
JSON
Cursed Proxy

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 131 on Windows

View result in a separate tab

Test name	Executions per second
structuredClone()	247095.0 Ops/sec
spread syntax	25363612.0 Ops/sec
Object.assign	3311473.2 Ops/sec
Object.fromEntries	621713.4 Ops/sec
JSON	622416.6 Ops/sec
Cursed Proxy	26506276.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided benchmark measures the performance of different approaches to create a deep copy of an object in JavaScript. The test cases use various methods, including `structuredClone`, spread syntax (`...`), `Object.assign()`, `Object.fromEntries()`, JSON serialization, and a custom Proxy implementation.

**Test Cases and Their Corresponding Methods**

1. **Structured Clone (`structuredClone(voucher)`)**: This method creates a deep copy of the input object using the `structuredClone()` function.
2. **Spread Syntax (`...voucher`)**: This method uses the spread syntax to create a shallow copy of the input object, which is not suitable for all types of objects.
3. **Object Assign (`Object.assign({}, voucher)`)**: This method creates a deep copy of the input object by merging it with an empty object using `Object.assign()`.
4. **Object.fromEntries (`Object.fromEntries(Object.entries(voucher))`)**: This method creates a deep copy of the input object by converting its entries into an array and then creating a new object from that array.
5. **JSON Serialization (`JSON.parse(JSON.stringify(voucher))`)**: This method serializes the input object to JSON, creates a new object from the serialized string using `JSON.parse()`, and then deserializes it back to the original object. However, this approach loses data due to the complexity of the input object.
6. **Cursed Proxy (`new Proxy({}, { ... })`)**: This method uses a custom Proxy implementation to create a deep copy of the input object by overriding the `get()` and `set()` methods.

**Pros and Cons of Each Approach**

1. **Structured Clone**: Pros - efficient, accurate for most objects; Cons - not widely supported (only introduced in ECMAScript 2022), may have performance issues due to slow implementation.
2. **Spread Syntax**: Pros - simple, fast; Cons - loses data for complex objects, not suitable for all types of objects.
3. **Object Assign**: Pros - reliable, accurate for most objects; Cons - slower than spread syntax, may lose data if the object has many properties.
4. **Object.fromEntries**: Pros - efficient, accurate for most objects; Cons - not widely supported (only introduced in ECMAScript 2022), may have performance issues due to slow implementation.
5. **JSON Serialization**: Pros - simple, fast; Cons - loses data due to complexity of input object, not suitable for complex objects.
6. **Cursed Proxy**: Pros - efficient, accurate for most objects; Cons - custom implementation, may have performance issues if not implemented correctly.

**Other Considerations**

* The `structuredClone()` method is the recommended approach for creating deep copies of objects in modern JavaScript. However, its slow implementation and limited support make it less suitable for high-performance applications.
* The spread syntax and `Object.fromEntries()` methods are fast and efficient but may lose data due to their simplicity.
* JSON serialization is a simple and fast way to create a copy of an object but loses data due to the complexity of the input object.

**Alternatives**

If you need alternative approaches, consider:

1. **Lodash's `cloneDeep()` function**: A widely used library function for creating deep copies of objects.
2. **Angular's `Json clone()` function**: A custom implementation for creating deep clones of objects in Angular applications.
3. **Manual implementation using recursive functions or iteration**: You can create a deep copy of an object by implementing your own recursive function or iterating over the object's properties and creating new copies.

Keep in mind that each approach has its pros and cons, and the choice ultimately depends on your specific use case and requirements.

Related benchmarks:

structuredClone vs spread vs Object.assign + more (version: 0)

Comparing performance of: structuredClone() vs spread syntax vs Object.assign vs Object.fromEntries vs JSON vs Cursed Proxy

Created: one year ago by: Registered User

Jump to the latest result

structuredClone()

spread syntax

Object.assign

Object.fromEntries

JSON

Cursed Proxy

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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