Benchmark: Destructuring vs Variables

Destructuring vs Variables (version: 3)

Comparing ES6 destructuring vs regular variables

Comparing performance of: Destructuring all CONST vs Destructuring each CONST vs Destructuring all as CONST vs Destructuring each as CONST vs Variables CONST vs Destructuring all LET vs Destructuring each LET vs Destructuring all as LET vs Destructuring each as LET vs Variables LET

Created: 5 years ago by: Registered User

Jump to the latest result

Script Preparation code:

window.testData = {fname: 'John', lname: 'Doe', age: 35, country: 'UK'};

Tests:

Destructuring all CONST
const {fname, lname, age, country} = testData;
Destructuring each CONST
const {fname} = testData; const {lname} = testData; const {age} = testData; const {country} = testData;
Destructuring all as CONST
const {fname: fn, lname: ln, age: a, country: c} = testData;
Destructuring each as CONST
const {fname: fn} = testData; const {lname: ln} = testData; const {age: a} = testData; const {country: c} = testData;
Variables CONST
const fname = testData.fname; const lname = testData.lname; const age = testData.age; const country = testData.country;
Destructuring all LET
let {fname, lname, age, country} = testData;
Destructuring each LET
let {fname} = testData; let {lname} = testData; let {age} = testData; let {country} = testData;
Destructuring all as LET
let {fname: fn, lname: ln, age: a, country: c} = testData;
Destructuring each as LET
let {fname: fn} = testData; let {lname: ln} = testData; let {age: a} = testData; let {country: c} = testData;
Variables LET
let fname = testData.fname; let lname = testData.lname; let age = testData.age; let country = testData.country;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Destructuring all CONST
Destructuring each CONST
Destructuring all as CONST
Destructuring each as CONST
Variables CONST
Destructuring all LET
Destructuring each LET
Destructuring all as LET
Destructuring each as LET
Variables LET

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark and explain what's being tested, compared options, pros and cons of those approaches, and other considerations.

**Benchmark Purpose:**

The benchmark compares the performance of three ways to access variables in JavaScript:

1. Destructuring with `const` (all values as constants)
2. Destructuring with `const` (individual values as constants)
3. Assigning to regular variables (`let`)
4. Using let destructuring (`let` all values)

**Destructuring:**

Destructuring is a syntax feature introduced in ECMAScript 2015 (ES6) that allows you to extract values from objects and arrays into separate variables.

* Destructuring with `const` (all values as constants): This method assigns the entire object or array to a constant variable, which can't be reassigned.
* Destructuring with `const` (individual values as constants): Similar to the previous method but extracts individual values instead of assigning the entire object or array.

**Comparison:**

The benchmark compares the performance of these four methods using Chrome 89 on a Macintosh (Intel Mac OS X 11.2.2) device. The results are reported in executions per second.

**Performance Comparison:**

Here's a summary of the performance comparison:

| Method | Best Execution Rate |
| --- | --- |
| Destructuring with `const` (all values as constants) | ~5,900 executions/second |
| Destructuring with `const` (individual values as constants) | ~1,700 executions/second |
| Assigning to regular variables (`let`) | ~159,702 executions/second |
| Let destructuring (`let` all values) | ~154,362 executions/second |

**Observations:**

* Destructuring with `const` (all values as constants) is the fastest method.
* Individual destructuring with `const` and assigning to regular variables (`let`) are relatively slow.
* Let destructuring (`let` all values) falls between individual destructuring and assigning to regular variables.

**Pros and Cons:**

Pros:

* Destructuring provides a concise way to access multiple values from an object or array.
* It can improve code readability and reduce the number of variables needed.

Cons:

* Performance impact, especially when dealing with large datasets or complex objects.
* Not all browsers support destructuring, and older versions might have varying performance.

**Best Practice:**

Use `const` destructuring for simple use cases where it improves code readability. For more complex scenarios, consider the performance implications and choose an approach that balances conciseness with performance needs.

Latest run results:

Run details: (Test run date: 3 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 11_2_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.82 Safari/537.36

Browser/OS: Chrome 89 on Mac OS X 11.2.2

View result in a separate tab

Test name	Executions per second
Destructuring all CONST	6704944.5 Ops/sec
Destructuring each CONST	1704451.9 Ops/sec
Destructuring all as CONST	6406981.0 Ops/sec
Destructuring each as CONST	1637435.5 Ops/sec
Variables CONST	1633674.1 Ops/sec
Destructuring all LET	5869795.0 Ops/sec
Destructuring each LET	1597020.6 Ops/sec
Destructuring all as LET	5895281.5 Ops/sec
Destructuring each as LET	1543628.6 Ops/sec
Variables LET	1597140.8 Ops/sec

Related benchmarks:

Destructuring vs Variables (version: 3)

Comparing ES6 destructuring vs regular variables

Comparing performance of: Destructuring all CONST vs Destructuring each CONST vs Destructuring all as CONST vs Destructuring each as CONST vs Variables CONST vs Destructuring all LET vs Destructuring each LET vs Destructuring all as LET vs Destructuring each as LET vs Variables LET

Created: 5 years ago by: Registered User

Jump to the latest result

Destructuring all CONST

Destructuring each CONST

Destructuring all as CONST

Destructuring each as CONST

Variables CONST

Destructuring all LET

Destructuring each LET

Destructuring all as LET

Destructuring each as LET

Variables LET

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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