Benchmark: .dot vs ['bracket'] notation

Script Preparation code:

  // 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'];

Historical Performance Data aggregated from 18 community runs

Desktop Results:

Chrome 18 runs

bracket / small object

27.1M/s

dot / small object

26.9M/s

dot / big object

24.7M/s

bracket / big object

24.5M/s

Fastest: bracket / small object (1.1x faster)

View exact numbers

✓ bracket / small object: 27,115,172 ops/sec
• dot / small object: 26,863,052 ops/sec
• dot / big object: 24,749,320 ops/sec
• bracket / big object: 24,512,486 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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

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/136.0.0.0 Safari/537.36

Browser/OS: Chrome 136 on Windows

View result in a separate tab

dot / small object

145.5M/s

bracket / small object

133.2M/s

dot / big object

82.7M/s

bracket / big object

79.8M/s

View exact numbers

Test name	Executions per second
✓ dot / small object	145,486,848 Ops/sec
bracket / small object	133,202,968 Ops/sec
dot / big object	82,683,536 Ops/sec
bracket / big object	79,842,824 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!

**What is being tested?**

MeasureThat.net is testing the performance difference between two notations: dot notation (`.`) and bracket notation (`[]`) for accessing object properties in JavaScript.

The benchmark compares the execution times of accessing a property using both notations on small and large objects. The test cases are designed to isolate the effect of the notation on the performance, ignoring other factors that might influence it, such as variable names or other code surrounding the accessed property.

**Options being compared:**

There are two options being compared:

1. **Dot notation (`.`)**: This is the traditional way of accessing object properties using a dot (.) followed by the property name.
2. **Bracket notation (`[]`)**: This is an alternative way of accessing object properties using square brackets `[]`, where you specify the property name as a string.

**Pros and Cons:**

* **Dot notation (`.`)**:
	+ Pros:
		- More readable and human-friendly, especially for those familiar with English naming conventions.
		- Can be faster when the property name is short and well-known.
	+ Cons:
		- Can lead to typos or syntax errors if the property name contains special characters or spaces.
		- May not perform as well on very large objects or complex property names.
* **Bracket notation (`[]`)**:
	+ Pros:
		- Can be faster when dealing with long or complex property names, as it avoids string concatenation and potential typos.
		- Can improve performance in situations where the property name is not known at compile time (e.g., dynamic property access).
	+ Cons:
		- Less readable and may require more explicit thinking about property names.
		- Can lead to errors if the property name contains special characters or spaces.

**Library usage:**

None of the test cases use any external libraries, so we can focus solely on the comparison between dot notation and bracket notation.

**Special JS feature/syntax:**

There are no special JavaScript features or syntax used in these benchmark definitions. They rely solely on standard JavaScript syntax for accessing object properties.

**Other alternatives:**

While dot notation and bracket notation are the primary options being compared, there are other ways to access object properties that might be worth noting:

* **Dollar sign (`$`)**: In some cases, especially in older browsers or libraries like jQuery, dollar signs were used as a shorthand for objects (e.g., `$obj.prop`). However, this approach has largely fallen out of favor and is not recommended.
* **Property access with `in` operator**: You can also access object properties using the `in` operator, like so: `var a = foo['prop25'] in foo ? foo['prop25'] : undefined`. While not directly related to dot notation or bracket notation, this approach can be useful when working with dynamically created objects.

Keep in mind that these alternatives are not being tested in MeasureThat.net's benchmark.

.dot vs ['bracket'] notation (version: 2) Benchmark.js

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`

Created: 8 years ago by: Registered User

Go to the latest result

dot / small object

bracket / small object

dot / big object

bracket / big object

Historical Performance Data aggregated from 18 community runs

Desktop Results:

Chrome 18 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

.dot vs ['bracket'] notation (version: 2) Benchmark.js

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

Created: 8 years ago by: Registered User

Go to the latest result

dot / small object

bracket / small object

dot / big object

bracket / big object

Historical Performance Data aggregated from 18 community runs

Desktop Results:

Chrome 18 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `dot / small object vs bracket / small object vs dot / big object vs bracket / big object`