---
description: '`obj . prop` syntax.'
---

# dot notation (.)

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

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

<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>](..)'s [<mark style="color:orange;">**value**</mark>](../../..).

```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="https://2527454625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MfvEFZnSBhKT6fJmus0%2Fuploads%2FbgtF3mk69l3fJKkrhYiz%2Fdot.notation.svg?alt=media&#x26;token=0f52c80b-2186-4016-b900-0b6873c7fe3d" alt="getting property" class="gitbook-drawing">

<img src="https://2527454625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MfvEFZnSBhKT6fJmus0%2Fuploads%2FPrVPfRILlCNOHB0AMF70%2Fset.property.svg?alt=media&#x26;token=3bd876e0-617e-40fc-8c22-e1b10c03408c" 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 [id](../../../../grammar/token/id "mention"):exclamation:
{% endhint %}

{% hint style="warning" %}
:star: <mark style="color:yellow;">**use**</mark> [<mark style="color:blue;">**`?.`**</mark>](optional-chaining) <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>](../../../prim/nullish):exclamation:
{% endhint %}

{% hint style="info" %}
the [**assignment**](../../../../grammar/op/assign/assignment) of a [**property**](..) <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**](../../proto/chain).
{% endhint %}
{% endtab %}

{% tab title="🔴 主題" %}
* [assignment](../../../../grammar/op/assign/assignment "mention")
* :exclamation:[as-property-name-allowed](../../../../grammar/token/keyword/reserved/as-property-name-allowed "mention")
* :scales:[vs-decimal-point](dot-notation-./vs-decimal-point "mention")
{% endtab %}

{% tab title="👥 相關" %}
* :point\_right:[optional-chaining](optional-chaining "mention")
* :point\_right:[bracket-notation](bracket-notation "mention")
* :information\_source:[dot](../../../../grammar/token/punctuator/dot "mention") 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>](../../../../err/ref)：[<mark style="color:yellow;">**'xxx' is not defined**</mark>](../../../../err/ref/not-defined):exclamation: (:point\_right:[undeclared](../../../../grammar/token/id/undeclared "mention"))
  * [<mark style="color:red;">**SyntaxError**</mark>](../../../../err/syntax)：[<mark style="color:yellow;">**unexpected number**</mark>](../../../../err/syntax/unexpected-number):exclamation: (:point\_right: needs valid [id](../../../../grammar/token/id "mention"))
  * [<mark style="color:red;">**TypeError**</mark>](../../../../err/type)：[<mark style="color:yellow;">**cannot read properties of nullish**</mark>](../../../../err/type/cannot-read-properties-of-nullish):exclamation: (:point\_right:[nullish](../../../prim/nullish "mention"))
{% endtab %}

{% tab title="📗 參考" %}
* [ ] [javascript-the-definitive-guide](../../../../../master/ref/javascript-the-definitive-guide "mention") ⟩&#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 %}
