Benchmark: .dot vs ['bracket'] vs [bracket] notation

Script Preparation code:

  var key = "prop25";

  // setup a tiny object
  var foo = {
   prop25: "value25"
  };
  
  // setup a really big object
  var bigObj = {};
  for (var i = 0; i < 100000; i++) {
   bigObj["prop" + i] = "value" + i;
  }

Tests:

dot / small object
var a = foo.prop25;
bracket / small object
var a = foo['prop25'];
dot / big object
var a = bigObj.prop25;
bracket / big object
var a = bigObj['prop25'];
bracket variable / small object
var a = foo[key];
bracket variable / bigobject
var a = bigObj[key];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
dot / small object
bracket / small object
dot / big object
bracket / big object
bracket variable / small object
bracket variable / bigobject

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's break down what is being tested in this JavaScript benchmark.

**Benchmark Definition**
The website is testing the performance of three different ways to access properties in objects: dot notation, bracket notation (square brackets), and bracket notation with a variable key.

**Options Compared**

1. **Dot Notation**: `obj.propName`
2. **Bracket Notation**: `[obj]propName` or `obj['propName']`
3. **Bracket Notation with Variable Key**: `obj[key]`

**Pros and Cons of Each Approach**

* **Dot Notation**: Easy to read and write, but can be slower for large objects due to the need to traverse the object tree. It's also more prone to typos.
* **Bracket Notation**: Can be faster than dot notation for large objects because it doesn't require traversing the object tree. However, it may be less readable and more error-prone due to the use of square brackets and quotes.
* **Bracket Notation with Variable Key**: Provides a good balance between readability and performance. It's similar to bracket notation but allows for dynamic property names.

**Library Usage**
None of the benchmark definitions explicitly mention using any libraries, but it's possible that some custom functions or helper methods are used in the script preparation code.

**Special JS Feature/ Syntax**
None mentioned.

**Benchmark Preparation Code**

The script preparation code sets up two objects: a small one (`foo`) and a large one (`bigObj`). The `foo` object has a single property, while `bigObj` is populated with 100,000 properties using a loop. This creates a scenario where the performance difference between dot notation and bracket notation can be observed.

**Individual Test Cases**

Each test case measures the execution time of accessing a specific property in the objects using one of the three approaches:

1. Dot Notation: `obj.propName`
2. Bracket Notation: `[obj]propName` or `obj['propName']`
3. Bracket Notation with Variable Key: `obj[key]`

The test cases are designed to cover different scenarios, such as small and large objects.

**Latest Benchmark Result**
The result shows the execution times for each test case on a Chrome 79 browser on a desktop device. The results indicate that bracket notation with variable key outperforms dot notation in all cases, while bracket notation performs similarly to dot notation in some cases.

**Other Alternatives**

If you're looking for alternatives or want to explore different approaches, you could consider:

* Using a JavaScript profiler to identify performance bottlenecks and optimize code.
* Implementing a caching mechanism to reduce the number of property accesses.
* Utilizing a data structure that allows for fast property access, such as a hash table or an object with optimized property retrieval.

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

Latest run results:

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

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

Browser/OS: Chrome 79 on Windows

View result in a separate tab

Test name	Executions per second
dot / small object	11127639.0 Ops/sec
bracket / small object	11113147.0 Ops/sec
dot / big object	9909377.0 Ops/sec
bracket / big object	9950405.0 Ops/sec
bracket variable / small object	5574925.5 Ops/sec
bracket variable / bigobject	5006694.5 Ops/sec

Related benchmarks:

.dot vs ['bracket'] vs [bracket] notation (version: 0)

Fork of https://jsperf.com/dot-vs-square-bracket/5

Comparing performance of: dot / small object vs bracket / small object vs dot / big object vs bracket / big object vs bracket variable / small object vs bracket variable / bigobject

Created: 4 years ago by: Guest

Jump to the latest result

dot / small object

bracket / small object

dot / big object

bracket / big object

bracket variable / small object

bracket variable / bigobject

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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