Benchmark: Object Property Access Notation: Destructuring vs. Dot. vs. Bracket (deep destructing)

Script Preparation code:

var globalData = {
    data: {
        data1: {
            data2: {
                property: "value",
            }
        }
    },
};

Tests:

Destructuring Notation
var {data: {data1: {data2: {property}} }} = globalData;
Dot Notation
var property = globalData.data.data1.data2.property;
Bracket Notation
var property = globalData['data']['data1']['data2']['property']

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Destructuring Notation
Dot Notation
Bracket Notation

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 130 on Windows

View result in a separate tab

Test name	Executions per second
Destructuring Notation	8400939.0 Ops/sec
Dot Notation	7696638.5 Ops/sec
Bracket Notation	7214762.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks and analyze the provided benchmark definition.

**Benchmark Definition**

The benchmark measures the performance difference between three different ways to access an object property in JavaScript:

1. Destructuring notation (`{data: {data1: {data2: {property}} }} = globalData;`)
2. Dot notation (`var property = globalData.data.data1.data2.property;`)
3. Bracket notation (`var property = globalData['data']['data1']['data2']['property'];`)

**Options Compared**

The benchmark compares the performance of these three approaches:

* Destructuring notation (using destructuring syntax)
* Dot notation (using dot `.` to access nested properties)
* Bracket notation (using bracket `[ ]` to access nested properties)

**Pros and Cons**

Here's a brief analysis of each approach:

* **Destructuring Notation**: This approach is concise and expressive, but it may not be supported by older browsers or environments. It also requires the property names to be in an object literal format.
* **Dot Notation**: This approach is widely supported and easy to read, but it can lead to longer code and more nested expressions. It's also slower than destructuring notation due to the overhead of accessing nested properties through dot notation.
* **Bracket Notation**: This approach is similar to dot notation but uses bracket notation instead. It's faster than dot notation but may be less readable.

**Library and Syntax Considerations**

The benchmark doesn't use any external libraries, so it only focuses on JavaScript syntax.

There are no special JS features or syntax mentioned in the benchmark definition.

**Other Alternatives**

If you're interested in exploring other approaches, here are a few alternatives:

* Using `Object.keys()` and `forEach()` to iterate over properties instead of dot notation.
* Using `JSON.parse()` to parse a JSON string containing nested properties (not tested in this benchmark).
* Using function literals or arrow functions to define small, self-contained expressions (not tested in this benchmark).

Keep in mind that these alternatives might not be relevant to the specific use case of this benchmark.

**Benchmark Preparation Code**

The script preparation code sets up an object `globalData` with a nested structure:
```javascript
var globalData = {
  data: {
    data1: {
      data2: {
        property: "value"
      }
    }
  }
};
```
This object is used to test the performance of accessing its properties using different notation.

**Individual Test Cases**

Each test case consists of a single benchmark definition with a different notation:

* Destructuring Notation:
```javascript
var {data: {data1: {data2: {property}} }} = globalData;
```
* Dot Notation:
```javascript
var property = globalData.data.data1.data2.property;
```
* Bracket Notation:
```javascript
var property = globalData['data']['data1']['data2']['property'];
```
These test cases are run multiple times to collect performance data.

**Latest Benchmark Result**

The benchmark result shows the execution rate per second for each notation on a specific browser (Firefox 118) on a desktop device:

* Destructuring Notation: `ExecutionsPerSecond` = 82780928.0
* Dot Notation: `ExecutionsPerSecond` = 676816704.0
* Bracket Notation: `ExecutionsPerSecond` = 743621824.0

These results indicate that destructuring notation is the fastest, followed by bracket notation, and then dot notation.

Related benchmarks:

Object Property Access Notation: Destructuring vs. Dot. vs. Bracket (deep destructing) (version: 0)

Comparing performance of: Destructuring Notation vs Dot Notation vs Bracket Notation

Created: 5 years ago by: Guest

Jump to the latest result

Destructuring Notation

Dot Notation

Bracket Notation

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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