> 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/bracket-notation.md).

# bracket 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) ⟩ bracket 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 accessor](/web/js/val/obj/prop/access/property-access-expression.md) ⟩ bracket notation

{% 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:purple;">**`obj [ prop ]`**</mark>  to <mark style="color:yellow;">**evaluate**</mark> an [**object property**](/web/js/val/obj/prop.md) / [**array element**](/web/js/val/builtin/arr/element.md)<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❗️](/web/js/val/builtin/arr/element/index/element-index-is-string.md)
{% 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 \[\]](/web/js/val/obj/prop/access/bracket-notation.md)<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 (.)](/web/js/val/obj/prop/access/dot-notation-..md)&#x20;
* :point\_right:[optional chaining (?., ?.\[\])](/web/js/val/obj/prop/access/optional-chaining.md)
* :white\_check\_mark:[element index](/web/js/val/builtin/arr/element/index.md) 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 property name](/web/js/val/obj/prop/name/computed.md).&#x20;
  * is a <mark style="color:yellow;">**dynamic**</mark> way to <mark style="color:green;">**access**</mark> [associated array](/web/js/concept/associated-array.md).
  * uses [brackets \[\]](/web/js/grammar/token/punctuator/brackets.md) <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 %}