> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/js/val/obj/prop/access/dot-notation-..md).

# dot notation (.)

* [JS](/web/js.md) ⟩ [value](/web/js/val.md) ⟩ [object](/web/js/val/obj.md) ⟩ [property](/web/js/val/obj/prop.md) ⟩ [access](/web/js/val/obj/prop/access.md) ⟩ dot notation
* [JS](/web/js.md) ⟩ [statement](/web/js/grammar/statement.md) ⟩ [expression](/web/js/grammar/statement/expr.md) ⟩ [operator](/web/js/grammar/op.md) ⟩ [left-hand side](/web/js/grammar/statement/expr/lhs.md) ⟩ [property access](/web/js/val/obj/prop/access/property-access-expression.md) ⟩ dot natation

{% hint style="success" %} <mark style="color:yellow;">**(**</mark>[property access expression](/web/js/val/obj/prop/access/property-access-expression.md)<mark style="color:yellow;">**)**</mark> (:star2: [**chaining rules**](/web/js/val/obj/prop/access/chaining-rules.md) <mark style="color:yellow;">**|**</mark> [**table of operators** ](/web/js/grammar/op/table-of-operators.md))

<mark style="color:yellow;">**use**</mark> <mark style="color:blue;">`obj`</mark> <mark style="color:blue;">`. prop`</mark> to <mark style="color:yellow;">**evaluate**</mark> object [<mark style="color:yellow;">**property**</mark>](/web/js/val/obj/prop.md)'s [<mark style="color:orange;">**value**</mark>](/web/js/val.md).

```javascript
obj . prop    // `prop` must be an "identifier".
```

:u6307: <mark style="color:yellow;">**synonyms**</mark>： "<mark style="color:purple;">**chaining**</mark>", "<mark style="color:purple;">**chaining operator**</mark>", "<mark style="color:purple;">**dot notation**</mark>"
{% endhint %}

{% tabs %}
{% tab title="🗺️ 圖表" %} <img src="/files/jUpsA74Q7hdbxrFOvUYy" alt="getting property" class="gitbook-drawing">

<img src="/files/pCpnkf9JfO3HynxqymLa" alt="setting property" class="gitbook-drawing">

* replit：[dot notation](https://replit.com/@pegasusroe/dot-notation#index.js)

```javascript
// ⭐️ 1. prop: invalid identifier
// ------------------------------
undeclared.1 = 'bad';  // ⛔ SyntaxError: Unexpected number
//        ^^

// ⭐️ 2. obj: "undeclared"
// -------------------------------
undeclared.prop;       // ⛔ ReferenceError: 'undeclared' is not defined

// ⭐️ 3. obj: "nullish"
// -------------------------------
null.prop              // ⛔ TypeError: Cannot read properties of null

// ⭐️ 4. obj: not "nullish"
// -------------------------------
(18).prop;            // ❗ undefined (no such `prop`)
(18).toString(16);    // ❓ "12" (property value, could be any value)

// object
let obj = {};

// ┌───────────────────┐
// │ valid identifiers │
// └───────────────────┘

obj.$1 = 'joe';       // ✅ can begin with $, _
obj.var = 'OK';       // ✅ reserved word is allowed❗
```

{% endtab %}

{% tab title="⭐️ 重點" %}
{% hint style="danger" %}
:star: the "<mark style="color:blue;">`prop`</mark>" part <mark style="color:red;">**must**</mark>**&#x20;**<mark style="color:yellow;">**be**</mark> an [identifier](/web/js/grammar/token/id.md):exclamation:
{% endhint %}

{% hint style="warning" %}
:star: <mark style="color:yellow;">**use**</mark> [<mark style="color:blue;">**`?.`**</mark>](/web/js/val/obj/prop/access/optional-chaining.md) <mark style="color:yellow;">**instead**</mark>**&#x20;**<mark style="color:red;">**if**</mark> <mark style="color:blue;">**`obj`**</mark> may be [<mark style="color:red;">**nullish**</mark>](/web/js/val/prim/nullish.md):exclamation:
{% endhint %}

{% hint style="info" %}
the [**assignment**](/web/js/grammar/op/assign/assignment.md) of a [**property**](/web/js/val/obj/prop.md) <mark style="color:red;">**always**</mark> <mark style="color:yellow;">**creates**</mark>**/**<mark style="color:yellow;">**sets a property**</mark> in the <mark style="color:orange;">**original**</mark>**&#x20;**<mark style="color:yellow;">**object**</mark>, it <mark style="color:red;">**never**</mark> <mark style="color:yellow;">**modifies objects**</mark> in the [**prototype chain**](/web/js/val/obj/proto/chain.md).
{% endhint %}
{% endtab %}

{% tab title="🔴 主題" %}

* [assignment (=)](/web/js/grammar/op/assign/assignment.md)
* :exclamation:[reserved word as property name is allowed❗️](/web/js/grammar/token/keyword/reserved/as-property-name-allowed.md)
* :scales:[dot notation vs. decimal point](/web/js/val/obj/prop/access/dot-notation-./vs-decimal-point.md)
  {% endtab %}

{% tab title="👥 相關" %}

* :point\_right:[optional chaining (?., ?.\[\])](/web/js/val/obj/prop/access/optional-chaining.md)
* :point\_right:[bracket notation \[\]](/web/js/val/obj/prop/access/bracket-notation.md)
* :information\_source:[dot (.)](/web/js/grammar/token/punctuator/dot.md) punctuator is used.
* :no\_entry: <mark style="color:yellow;">**possible**</mark>**&#x20;**<mark style="color:red;">**errors**</mark><mark style="color:yellow;">**：**</mark>
  * [<mark style="color:red;">**ReferenceError**</mark>](/web/js/err/ref.md)：[<mark style="color:yellow;">**'xxx' is not defined**</mark>](/web/js/err/ref/not-defined.md):exclamation: (:point\_right:[undeclared identifier](/web/js/grammar/token/id/undeclared.md))
  * [<mark style="color:red;">**SyntaxError**</mark>](/web/js/err/syntax.md)：[<mark style="color:yellow;">**unexpected number**</mark>](/web/js/err/syntax/unexpected-number.md):exclamation: (:point\_right: needs valid [identifier](/web/js/grammar/token/id.md))
  * [<mark style="color:red;">**TypeError**</mark>](/web/js/err/type.md)：[<mark style="color:yellow;">**cannot read properties of nullish**</mark>](/web/js/err/type/cannot-read-properties-of-nullish.md):exclamation: (:point\_right:[nullish](/web/js/val/prim/nullish.md))
    {% endtab %}

{% tab title="📗 參考" %}

* [ ] [JavaScript: The Definitive Guide](/web/master/ref/javascript-the-definitive-guide.md) ⟩&#x20;
  * [x] 6.3 Querying & Setting Properties
  * [ ] 14.2 Object Extensibility&#x20;
    {% endtab %}

{% tab title="📘 手冊" %}

* [Property accessors](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors) ⟩ [dot notation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors#dot_notation)
* [Optional chaining (?.)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining)
  {% endtab %}
  {% endtabs %}