Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
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
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>
Run tests (3)
Previous results
Fork
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
Embed
Embed Benchmark Result
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):
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
dot (.) vs destructure
Object Property Access Notation: Destructuring vs. Dot. vs. Bracket (deep destructing)
Delete vs destructure for objects v2 2
Property access via dot notation vs brackets
Comments
Confirm delete:
Do you really want to delete benchmark?