> ## Documentation Index
> Fetch the complete documentation index at: https://docs.syntblaze.com/llms.txt
> Use this file to discover all available pages before exploring further.
# JavaScript Computed Member Access
The `[]` (bracket) operator is a member access operator that evaluates to a Reference Record used to resolve a property on an object. Unlike dot notation, bracket notation evaluates the expression provided within the brackets and coercively resolves the resulting value into a string or a `Symbol` to determine the property key.
## Syntax
```javascript theme={"dark"}
object[expression]
```
## Evaluation Mechanics
When the JavaScript engine encounters the `[]` operator, it follows a strict sequence defined by the ECMAScript specification. Crucially, the operator itself does not read, write, or delete values; it strictly returns a Reference Record. The surrounding syntax (such as an assignment operator, standard read, or the `delete` keyword) dictates whether an internal `[[Get]]`, `[[Set]]`, or `[[Delete]]` method is subsequently called on that Reference.
The evaluation order is as follows:
1. **Base Evaluation:** The `object` expression to the left of the brackets is evaluated to retrieve the base value.
2. **Expression Evaluation:** The `expression` inside the brackets is evaluated to retrieve the property name value.
3. **Coercibility Check (`RequireObjectCoercible`):** The engine checks if the base value is object-coercible. If the base evaluates to `null` or `undefined`, a `TypeError` is thrown. Because this check occurs *after* the bracket expression is evaluated but *before* key coercion, side effects from evaluating the expression itself will occur, but side effects from key coercion (such as invoking a custom `toString()` method on an object) will not execute.
4. **Key Coercion (`ToPropertyKey`):** The engine applies the internal `ToPropertyKey` abstract operation to the evaluated property name:
* If the value is a `Symbol`, it is used directly as the property key.
* For all other types, the value is coerced into a string using the internal `ToString` operation.
5. **Reference Record Creation:** The operator evaluates to a Reference Record containing the base value and the resolved property key.
## Type Coercion Behavior
Because the operator enforces `ToPropertyKey` coercion, non-string primitives and objects exhibit specific behaviors when used inside the brackets:
```javascript theme={"dark"}
const target = {};
// 1. Number coercion
target[1] = "A";
// Engine coercively converts 1 to "1". Equivalent to target["1"]
// 2. Boolean coercion
target[true] = "B";
// Engine coercively converts true to "true". Equivalent to target["true"]
// 3. Object coercion
const keyObj = {};
target[keyObj] = "C";
// keyObj.toString() is called. Equivalent to target["[object Object]"]
// 4. Symbol preservation
const sym = Symbol("id");
target[sym] = "D";
// Symbols bypass string coercion and remain unique identifiers.
```
## Identifier Constraints and Private Fields
The `[]` operator bypasses the strict lexical grammar rules enforced by dot notation (`.`). Dot notation requires the property key to be a valid JavaScript `IdentifierName`, which fully supports Unicode characters (e.g., `obj.café`, `obj.π`), `$`, and `_`, but cannot start with a digit. Bracket notation, however, accepts any arbitrary string sequence.
```javascript theme={"dark"}
const obj = {};
// Valid in bracket notation, syntax error in dot notation
obj["invalid-identifier"] = true;
obj["123starts_with_number"] = true;
obj[""] = true; // Empty string is a valid property key
```
However, bracket notation cannot be used to access private class fields. Private fields (prefixed with `#`) are resolved lexically at compile time. Attempting to use bracket notation with a private field identifier string will attempt to access a standard public property, failing to reach the private field.
```javascript theme={"dark"}
class Example {
#privateField = 10;
test() {
this.#privateField; // Evaluates to 10 (Accesses private field)
this["#privateField"]; // Evaluates to undefined (Accesses public property named "#privateField")
}
}
```
## Array Indexing
In JavaScript, Arrays are standard objects, and array indices are standard object properties. The `[]` operator used on arrays is mechanically identical to its use on standard objects. The integer index is evaluated and coerced into a string key.
```javascript theme={"dark"}
const arr = ["X", "Y", "Z"];
arr[1];
// Evaluates to a Reference Record for base `arr` and property key "1".
// A subsequent [[Get]] operation on this Reference returns "Y".
```
Tired of Poor JavaScript Skills? Fix That With Deep Grasping!
Learn More
