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

Script Preparation code:

  var key = "prop25";

  // setup a tiny object
  var foo = {
   prop25: "value25"
  };

  function get( obj ){ return obj.prop25; }
  
  // 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];
getter/small
var a = get( foo );
getter /big
var a = get( bigObj );

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
getter/small
getter /big

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36

Browser/OS: Chrome 110 on Linux

View result in a separate tab

Test name	Executions per second
dot / small object	17572582.0 Ops/sec
bracket / small object	17141718.0 Ops/sec
dot / big object	15211019.0 Ops/sec
bracket / big object	15707486.0 Ops/sec
bracket variable / small object	8791559.0 Ops/sec
bracket variable / bigobject	7182957.5 Ops/sec
getter/small	7676066.0 Ops/sec
getter /big	7138213.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark.

**Benchmark Definition:**

The benchmark tests the performance of three different ways to access properties in JavaScript objects:

1. Dot notation (`obj.prop`).
2. Bracket notation (square bracket) (`obj['prop']`).
3. Bracket notation with a variable (e.g., `obj[prop]`) and also accessing methods through getter (using `get(obj)`).

**Options compared:**

* The three different ways to access properties in JavaScript objects.
* The performance of each method is tested on two types of objects:
	+ A small object (`foo`).
	+ A large object (`bigObj`) with 100,000 properties.

**Pros and Cons:**

* **Dot notation**: Simple and readable, but can lead to slower access times due to the overhead of string lookups.
* **Bracket notation (square bracket)**: Faster than dot notation because it avoids string lookups. However, it can be less readable and may require more memory allocations.
* **Bracket notation with variable**: Similar to bracket notation, but allows for dynamic property names. Can be faster than dot notation if the properties are computed at runtime.
* **Getter**: Accessing methods through getter provides a level of abstraction and encapsulation, but can introduce overhead due to function calls.

**Library usage:**

None mentioned in this benchmark.

**Special JS features or syntax:**

No special JavaScript features or syntax are used in this benchmark. However, the use of bracket notation with variables (`obj[prop]`) is an example of a dynamic property access pattern.

**Benchmark results:**

The benchmark results show the execution per second for each test case on Chrome 110 running on Linux. The test cases are:

* `dot / small object`: Accessing properties using dot notation on a small object.
* `bracket / small object`: Accessing properties using bracket notation on a small object.
* `bracket / big object`: Accessing properties using bracket notation on a large object.
* `dot / big object`: Accessing properties using dot notation on a large object.
* `bracket variable / small object`: Accessing properties using bracket notation with variables on a small object.
* `bracket variable / big object`: Accessing properties using bracket notation with variables on a large object.
* `getter/small`: Accessing methods through getter on a small object.
* `getter /big`: Accessing methods through getter on a large object.

The results show that bracket notation with variables and getter tend to perform better than dot notation, especially on the larger object. However, the performance differences are relatively small, suggesting that the choice of notation depends on code readability and maintainability rather than raw performance.

**Alternatives:**

Other alternatives for accessing properties in JavaScript objects include:

* **Dollar sign notation (`obj.$prop`)**: Similar to dot notation but uses a dollar sign prefix.
* **CamelCase notation**: Using camelCase notation (e.g., `obj.prop`) instead of dot or bracket notation.
* **Dynamic property access using `Object.prototype.hasOwnProperty.call(obj, 'prop')`**: A more explicit way to check if an object has a certain property.

However, the choice of notation ultimately depends on code readability and maintainability, as well as performance considerations.

Related benchmarks:

.dot vs ['bracket'] vs [bracket] notation vs getter (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 vs getter/small vs getter /big

Created: one year 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

getter/small

getter /big

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