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

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

Test name	Executions per second
dot / small object	145486848.0 Ops/sec
bracket / small object	133202968.0 Ops/sec
dot / big object	82683536.0 Ops/sec
bracket / big object	79842824.0 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.

Related benchmarks:

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

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

Jump to the latest result

dot / small object

bracket / small object

dot / big object

bracket / big object

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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