---
description: use . / [] / ?. / ?.[] to evaluate object property / array element.
---

# property access expression

* [JS](../../../..) ⟩ [statement](../../../../grammar/statement) ⟩ [expression](../../../../grammar/statement/expr) ⟩ [operator](../../../../grammar/op) ⟩ [left-hand side](../../../../grammar/statement/expr/lhs) ⟩ [property access](property-access-expression) ⟩ expression
* [JS](../../../..) ⟩ [value](../../..) ⟩ [object](../..) ⟩ [property](..) ⟩ [access]() ⟩ expression&#x20;

{% hint style="success" %}
([op](../../../../grammar/op "mention"))&#x20;

<mark style="color:yellow;">**use**</mark> [<mark style="color:blue;">**`.`**</mark>](dot-notation-.), [<mark style="color:blue;">**`[]`**</mark>](bracket-notation), [<mark style="color:blue;">**`?.`**</mark>](optional-chaining), [<mark style="color:blue;">**`?.[]`**</mark>](optional-chaining), [<mark style="color:blue;">**`?.()`**</mark>](optional-invocation-.) to <mark style="color:yellow;">**evaluate**</mark> the [<mark style="color:orange;">**value**</mark>](../../..) of **object** [**property**](..) <mark style="color:yellow;">**/**</mark> **array** [**element**](../../../builtin/arr/element).

```javascript
// ⭐️ (normal) chaining
obj . identifier    // dot notation
obj   [ expr ]      // bracket notation (no "dot"❗️)

// ⭐️ optional chaining
obj  ?. prop        // dot notation
obj  ?. [ expr ]    // bracket notation
func ?. ( args )    // optional invocation
```

:u6307: <mark style="color:yellow;">**synonyms**</mark>**：** "<mark style="color:purple;">**property accessor**</mark>", "<mark style="color:purple;">**property access expression**</mark>", "<mark style="color:purple;">**chaining**</mark>"
{% endhint %}

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="warning" %}
<mark style="color:yellow;">**the "**</mark><mark style="color:yellow;"><mark style="color:blue;">**`obj`**<mark style="color:blue;"></mark><mark style="color:yellow;">**" part of the**</mark> <mark style="color:purple;">**property accessor**</mark>**：**

* the <mark style="color:yellow;">**expression**</mark> <mark style="color:red;">**before**</mark> <mark style="color:blue;">`.`</mark> <mark style="color:yellow;">**/**</mark> <mark style="color:blue;">`[`</mark> (the <mark style="color:blue;">`obj`</mark> part) is <mark style="color:red;">**first**</mark>**&#x20;**<mark style="color:yellow;">**evaluated**</mark>.&#x20;
* if the [..](../../.. "mention") <mark style="color:yellow;">**is**</mark> [null](../../../prim/null "mention") <mark style="color:yellow;">**/**</mark> [undefined](../../../prim/undefined "mention"), [<mark style="color:red;">**TypeError**</mark>](../../../../err/type/cannot-read-properties-of-nullish) is <mark style="color:yellow;">**thrown**</mark>.
* <mark style="color:yellow;">**use**</mark> [Broken link](broken-reference "mention") <mark style="color:yellow;">**(**</mark><mark style="color:blue;">`?.`</mark> <mark style="color:yellow;">**/**</mark> <mark style="color:blue;">`?.[]`</mark><mark style="color:yellow;">**)**</mark> to <mark style="color:green;">**guard**</mark>**&#x20;**<mark style="color:yellow;">**againt**</mark> this case.
{% endhint %}

{% hint style="info" %}
<mark style="color:yellow;">**the**</mark><mark style="color:yellow;">**&#x20;**</mark><mark style="color:yellow;"><mark style="color:blue;">**`[expr]`**<mark style="color:blue;"></mark><mark style="color:yellow;">**&#x20;**</mark><mark style="color:yellow;">**part of**</mark> [bracket-notation](bracket-notation "mention")<mark style="color:yellow;">**：**</mark>

* is <mark style="color:yellow;">**evaluated**</mark> and <mark style="color:red;">**converted**</mark> to a <mark style="color:yellow;">**string**</mark>:exclamation:
{% endhint %}

{% hint style="info" %}
[**property access**](property-access-expression) and [**invocation**](../../../../grammar/statement/expr/invoke) expressions have <mark style="color:red;">**higher**</mark>**&#x20;**<mark style="color:yellow;">**precedence**</mark> <mark style="color:yellow;">**than**</mark> <mark style="color:red;">**any**</mark> of the [**operators**](../../../../grammar/op/table-of-operators).
{% endhint %}
{% endtab %}

{% tab title="🔴 主題" %}
* :star2:[chaining-rules](chaining-rules "mention")
* [dot-notation-.](dot-notation-. "mention") - chaining&#x20;
* [bracket-notation](bracket-notation "mention")
* [optional-chaining](optional-chaining "mention")&#x20;
* [optional-invocation-.](optional-invocation-. "mention")
{% endtab %}

{% tab title="👥 相關" %}
* :bulb:[symbol](../../../prim/symbol "mention") can be used in the <mark style="color:blue;">`[expr]`</mark> part of [bracket-notation](bracket-notation "mention").
* :no\_entry:[cannot-read-properties-of-nullish](../../../../err/type/cannot-read-properties-of-nullish "mention") - occurs when obj is [nullish](../../../prim/nullish).
* [**delete**](../create/delete) `<expr>` <mark style="color:yellow;">**returns true**</mark> <mark style="color:red;">**if**</mark> `<expr>` <mark style="color:yellow;">**is**</mark>**&#x20;**<mark style="color:red;">**not**</mark> a <mark style="color:purple;">**property access expression**</mark>.
{% endtab %}

{% tab title="📗 參考" %}
* [ ] [javascript-the-definitive-guide](../../../../../master/ref/javascript-the-definitive-guide "mention") ⟩&#x20;
  * [x] 4.4 Property Access Expressions
{% endtab %}

{% tab title="📘 手冊" %}
* [ ] [Expressions and operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) ⟩ [Property accessors](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors)
{% endtab %}
{% endtabs %}
