> 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 %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://lochiwei.gitbook.io/web/js/val/obj/prop/access/bracket-notation.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.