> ## 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 Member Access

The `.` (dot) operator is a property accessor that evaluates to a **Reference Record** pointing to a specific property on an object. It provides a statically-analyzable syntax for property resolution where the property name is an identifier known at authoring time.

```text theme={"dark"}
Expression.IdentifierName
Expression.#PrivateIdentifier
```

## Evaluation Mechanics and Reference Records

When the JavaScript engine evaluates the dot operator, it does *not* immediately retrieve a value, trigger internal `[[Get]]`/`[[Set]]` methods, or invoke getters. Instead, it performs the following steps to construct an internal specification type known as a Reference Record:

1. **Left Operand Evaluation:** The engine evaluates the `Expression` on the left side.
2. **Object Coercibility Check:** If the evaluated left operand is `null` or `undefined`, the engine immediately throws a `TypeError` (`RequireObjectCoercible`).
3. **Reference Record Construction:** The operator returns a Reference Record containing:
   * **Base Value:** The evaluated result of the left operand. If the operand is a primitive (e.g., `string`, `number`), the base value remains the primitive, and boxing (temporary coercion to a wrapper object) is deferred until the Reference Record is actually operated upon.
   * **Referenced Name:** The literal string representation of the right operand (`IdentifierName` or `PrivateIdentifier`).
   * **Strict Reference Flag:** A boolean indicating if the code is executing in strict mode.

## Contextual Resolution

Because the dot operator evaluates to a Reference Record rather than a concrete value, the actual internal operations are deferred to the surrounding syntactic context:

* **Value Extraction (`GetValue`):** If the expression is used in a context expecting a value (e.g., `const x = obj.prop`), the engine calls the internal `GetValue` operation on the Reference Record. This triggers the `[[Get]]` internal method on the base object, traversing the prototype chain and invoking getter functions if the property is an accessor.
* **Assignment (`PutValue`):** If used as the left-hand side of an assignment (e.g., `obj.prop = 10`), the engine calls `PutValue` on the Reference Record. This triggers the `[[Set]]` internal method, mutating an existing property or defining a new own property.
* **Deletion:** If used with the `delete` operator (e.g., `delete obj.prop`), the engine uses the Reference Record to remove the property directly. Because `GetValue` is never called, getter functions are not invoked during deletion.

## Method Invocation and `this` Binding

The Reference Record returned by the dot operator is critical for establishing the `this` context during method calls.

When a function is invoked directly from a dot property access, the engine extracts the **Base Value** from the Reference Record and passes it as the `this` binding to the function's execution context. If the dot operator evaluated directly to the function's value instead of a Reference Record, the base object reference would be lost, and `this` would default to the global object or `undefined`.

```javascript theme={"dark"}
const obj = {
  method() { return this; }
};

// The dot operator returns a Reference Record with `obj` as the Base Value.
// The call operation uses that Base Value as `this`.
obj.method(); 
```

## Lexical Grammar and Numeric Literals

The dot operator interacts specifically with JavaScript's lexical grammar regarding numeric literals. A dot immediately following an integer literal is parsed by the engine as a decimal point for a floating-point number, not as the property accessor operator.

```javascript theme={"dark"}
// SyntaxError: Invalid or unexpected token
// The engine parses `1.` as a number, leaving `toString()` as an unexpected identifier.
1.toString(); 

// Valid: The first dot is the decimal point, the second is the property accessor.
1..toString(); 
1.0.toString();

// Valid: The grouping operator forces evaluation of the integer before property access.
(1).toString(); 
```

## Right Operand Constraints

The right side of the dot must be an `IdentifierName` or a `PrivateIdentifier` (which begins with a `#` to access private class fields).

According to the ECMAScript specification, an `IdentifierName` is broader than a standard identifier because it allows the use of reserved words (e.g., `obj.class`, `obj.catch`). It must begin with a Unicode character possessing the `ID_Start` property, an underscore (`_`), or a dollar sign (`$`). Subsequent characters must possess the `ID_Continue` property. Because the right operand is restricted to this syntax, the dot operator cannot be used to access properties whose keys contain spaces, hyphens, start with numbers, or are dynamically determined at runtime.

<div
  style={{ 
display: "flex", 
justifyContent: "space-between", 
alignItems: "center", 
maxWidth: "754px", 
padding: "1rem 0",
marginBottom: "24px"
}}
>
  <span style={{ fontWeight: "bold", fontSize: "1.25rem", color: "var(--tw-prose-headings)", fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif" }}>Tired of Poor JavaScript Skills? Fix That With Deep Grasping!</span>

  <a
    href="https://syntblaze.com"
    target="_blank"
    style={{ 
  marginLeft: "24px",
  textDecoration: "none", 
  backgroundColor: "#007AFF",
  color: "#ffffff", 
  padding: "6px 16px", 
  borderRadius: "16px",
  fontSize: "0.9rem",
  fontWeight: "600",
  textAlign: "center",
  transition: "background-color 0.2s ease"
}}
  >
    Learn More
  </a>
</div>

<div style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}>
  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/skill-tracking.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=b9b0305c93bb501c9e767b5c76c88835" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/skill-tracking.png" />

  <img src="https://mintcdn.com/syntblazellc/23tyuOzaWS88qFlc/images/nuggets.png?fit=max&auto=format&n=23tyuOzaWS88qFlc&q=85&s=c86c80197299762989e9b882419b2109" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/nuggets.png" />

  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/bite-sized-exercises.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=a65f9a38c37ff28ab73ed783c53c60e3" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/bite-sized-exercises.png" />
</div>

<div style={{ display: "flex", gap: "12px", flexWrap: "wrap", marginTop: "12px" }}>
  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/mastery-chain.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=748a1763454713e679260fbb95f154a2" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/mastery-chain.png" />

  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/element-previews.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=242f61448ff5dd6deaaab2dccc13b507" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/element-previews.png" />

  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/element-explanations.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=cf0fc1c31f9cd0fc26716781be05fbc9" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/element-explanations.png" />
</div>
