Benchmark: Object Property Access Notation: Destructuring vs. Dot. vs. Bracket PK

Script Preparation code:

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

Tests:

Destructuring Notation
var { data } = globalData; var a1 = data; var a2 = data; var a3 = data; var a4 = data; var a5 = data;
Dot Notation
var dot = globalData.data; var a1 = globalData.data; var a2 = globalData.data; var a3 = globalData.data; var a4 = globalData.data; var a5 = globalData.data;
Bracket Notation
var bracket = globalData['data']; var a1 = globalData['data']; var a2 = globalData['data']; var a3 = globalData['data']; var a4 = globalData['data']; var a5 = globalData['data'];

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 month ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.3.1 Safari/605.1.15

Browser/OS: Safari 26 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Destructuring Notation	609497152.0 Ops/sec
Dot Notation	601401024.0 Ops/sec
Bracket Notation	566869120.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and its test cases.

**Benchmark Definition**

The benchmark measures the performance of object property access notation in JavaScript, specifically comparing three approaches: destructuring, dot notation, and bracket notation.

**Options Compared**

1. **Destructuring Notation**: This approach uses the syntax `{ property }` to extract a value from an object.
2. **Dot Notation**: This approach uses the syntax `object.property` to access a property of an object.
3. **Bracket Notation**: This approach uses the syntax `object['property']` to access a property of an object, where the property name is a string.

**Pros and Cons**

* **Destructuring Notation**:
	+ Pros: Can be more concise and readable when extracting multiple values from an object.
	+ Cons: May have performance overhead due to the creation of a new object.
* **Dot Notation**:
	+ Pros: Typically faster than destructuring notation, as it only requires a simple property access.
	+ Cons: Can lead to longer code if you need to access nested properties.
* **Bracket Notation**:
	+ Pros: Similar to dot notation but allows for more flexibility when accessing properties with special characters or non-ASCII names.
	+ Cons: May be slower than dot notation due to the overhead of using string concatenation.

**Library and Special JS Features**

There are no libraries used in this benchmark. However, it's worth noting that the `const` and `let` keywords are used, which are part of modern JavaScript syntax.

**Benchmark Preparation Code**

The preparation code creates a global object `globalData` with a nested property `data`, which is used to test the three access notation approaches.

**Test Cases**

Each test case creates five variables (`a1` to `a5`) and assigns them the value of the extracted data, but using one of the three access notation approaches. The order of execution is not specified in the benchmark, so we'll assume that the results are representative of each approach's performance.

**Benchmark Results**

The latest benchmark results show the executions per second for each test case on a Chrome 107 browser running on Windows. The results suggest that:

* Destructuring notation has a higher overhead than dot notation.
* Bracket notation is slower than dot notation, possibly due to string concatenation.

Keep in mind that these results may vary depending on the specific use case and environment.

**Alternatives**

Other alternatives for accessing object properties include:

* **Arrow functions**: `const value = () => globalData.data;`
* **Property access with `in` operator**: `for (const key in globalData) { if (key === 'data') { const value = globalData[key]; } }`
* **Constructor function**: `function MyObject() { this.value = globalData.data; };`

These alternatives may have different performance characteristics and use cases, but are worth considering depending on your specific requirements.

Related benchmarks:

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

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

Created: 4 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):