Benchmark: array of object destruc vs JSON.parse + JSON.stringify

Tests:

1 level destruct
const original = new Array(10).fill(null).map((_, i) => ({a:i, b:2*i, c: 'hi'})) const des = original.map((item) => ({...item})) des[0].a;
Json parse
const original = new Array(10).fill(null).map((_, i) => ({a:i, b:2*i, c: 'hi'})) const json = JSON.parse(JSON.stringify(original)); json[0].a;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
1 level destruct
Json parse

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 127 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
1 level destruct	4841680.0 Ops/sec
Json parse	691764.2 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Explanation**

The provided JSON represents a JavaScript microbenchmark test case on the MeasureThat.net website. The benchmark compares two approaches for destructuring objects inside an array:

1. **Array Destructure**: This approach uses the spread operator (`...`) to create new objects from existing ones, effectively "deconstructing" the original object.
2. **JSON.parse + JSON.stringify Hack**: This approach uses a known trick to create a deep copy of the original object by parsing and then re-serializing it as JSON.

**Options Compared**

The benchmark compares the execution performance of these two approaches:

* `Array Destructure`: Creates new objects from existing ones using the spread operator.
* `JSON.parse + JSON.stringify Hack`: Uses a known trick to create a deep copy of the original object by parsing and then re-serializing it as JSON.

**Pros and Cons**

### Array Destructure

Pros:

* Efficient and concise
* Native JavaScript support
* Fast execution

Cons:

* May not work as expected with complex object structures or non-primitive values
* Can lead to unexpected behavior if not used carefully

### JSON.parse + JSON.stringify Hack

Pros:

* Guarantees a deep copy of the original object
* Works well with complex object structures and non-primitive values
* Well-established and widely used technique

Cons:

* Inefficient and slower compared to array destructure
* Requires careful handling to avoid issues like modifying the copied object or losing data types

**Library/Dependency**

None is explicitly mentioned in this benchmark, but JSON.parse and JSON.stringify are built-in JavaScript methods.

**Special JS Feature/Syntax**

No special JavaScript features or syntax are used in this benchmark. The focus is on comparing two approaches for destructuring objects inside an array.

**Alternative Approaches**

Other alternative approaches could be:

* Using a library like Lodash's `cloneDeep` or `pick`
* Utilizing the `Object.assign()` method with an empty object
* Employing a custom deep copy implementation using recursion or iteration

However, these alternatives are not directly compared in this benchmark, as the focus is on comparing array destructure and the JSON.parse + JSON.stringify hack.

Related benchmarks:

array of object destruc vs JSON.parse + JSON.stringify (version: 0)

Checking how does 1 level of objects destruct inside 1 array compared to the JSON.parse(JSON.stringify(data)) hack commonly used to deeply nested objects

Comparing performance of: 1 level destruct vs Json parse

Created: 4 months ago by: Registered User

Jump to the latest result

1 level destruct

Json parse

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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