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: 6 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

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Autogenerated LLM Summary (model llama3.2:3b, generated one year 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.

Related benchmarks: