# bracket notation \[]

* [JS](https://lochiwei.gitbook.io/web/js) ⟩ [value](https://lochiwei.gitbook.io/web/js/val) ⟩ [object](https://lochiwei.gitbook.io/web/js/val/obj) ⟩ [property](https://lochiwei.gitbook.io/web/js/val/obj/prop) ⟩ [access](https://lochiwei.gitbook.io/web/js/val/obj/prop/access) ⟩ bracket notation
* [JS](https://lochiwei.gitbook.io/web/js) ⟩ [statement](https://lochiwei.gitbook.io/web/js/grammar/statement) ⟩ [expression](https://lochiwei.gitbook.io/web/js/grammar/statement/expr) ⟩ [operator](https://lochiwei.gitbook.io/web/js/grammar/op) ⟩ [left-hand side](https://lochiwei.gitbook.io/web/js/grammar/statement/expr/lhs) ⟩ [property accessor](https://lochiwei.gitbook.io/web/js/val/obj/prop/access/property-access-expression) ⟩ bracket notation

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

<mark style="color:yellow;">**use**</mark> <mark style="color:purple;">**`obj [ prop ]`**</mark>  to <mark style="color:yellow;">**evaluate**</mark> an [**object property**](https://lochiwei.gitbook.io/web/js/val/obj/prop) / [**array element**](https://lochiwei.gitbook.io/web/js/val/builtin/arr/element)<mark style="color:yellow;">.</mark>&#x20;

```javascript
// ⭐️ bracket notation
obj [ prop ]    // obj: non-nullish, prop: string | symbol (any other value coerced to string)
```

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

{% tabs %}
{% tab title="🧨 雷區" %}
{% hint style="danger" %}
[element-index-is-string](https://lochiwei.gitbook.io/web/js/val/builtin/arr/element/index/element-index-is-string "mention")
{% endhint %}
{% endtab %}

{% tab title="⭐️ 重點" %}
{% hint style="warning" %} <mark style="color:yellow;">**the**</mark><mark style="color:yellow;">**&#x20;**</mark><mark style="color:yellow;"><mark style="color:blue;">**`[prop]`**<mark style="color:blue;"></mark><mark style="color:yellow;">**&#x20;**</mark><mark style="color:yellow;">**part of**</mark> [bracket-notation](https://lochiwei.gitbook.io/web/js/val/obj/prop/access/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 %}
  {% endtab %}

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

* :point\_right:[dot-notation-.](https://lochiwei.gitbook.io/web/js/val/obj/prop/access/dot-notation-. "mention")&#x20;
* :point\_right:[optional-chaining](https://lochiwei.gitbook.io/web/js/val/obj/prop/access/optional-chaining "mention")
* :white\_check\_mark:[index](https://lochiwei.gitbook.io/web/js/val/builtin/arr/element/index "mention") is <mark style="color:yellow;">**accessed**</mark> throught <mark style="color:purple;">**bracket notation**</mark>.
* <mark style="color:purple;">**bracket notation**</mark> ⟩&#x20;
  * is [computed](https://lochiwei.gitbook.io/web/js/val/obj/prop/name/computed "mention").&#x20;
  * is a <mark style="color:yellow;">**dynamic**</mark> way to <mark style="color:green;">**access**</mark> [associated-array](https://lochiwei.gitbook.io/web/js/concept/associated-array "mention").
  * uses [brackets](https://lochiwei.gitbook.io/web/js/grammar/token/punctuator/brackets "mention") <mark style="color:yellow;">**punctuator**</mark><mark style="color:purple;">**.**</mark>
    {% endtab %}

{% tab title="💈範例" %}

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

```javascript
// object
let obj = { name: 'Joe' };

// ⭐️ bracket notaton  
// -------------------------------------------------------------------
//    • syntax: `obj [ prop ]`
//    • obj : expression (❗ value of null/undefined raises TypeError)
//    • prop: expression (❗ evaluated and "converted" to string)
// -------------------------------------------------------------------

obj[''] = 'joe';     // ✅ "empty string" is OK
obj[' '] = 'OK';     // ✅ "space" is OK
obj[true] = true;    // ✅ boolean is OK


const key = "name";          // variable
const getKey = () => "name"; // function

// ⭐️ `prop` can be any expression.
obj["name"],     // 'Joe'    (prop: string literal)
obj[key],        // 'Joe'    (prop: variable)
obj[getKey()],   // 'Joe'    (prop: function return value)
```

{% endtab %}

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

* [Property accessors](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors) ⟩ [bracket notation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors#bracket_notation)
  {% endtab %}
  {% endtabs %}