---
description: string or symbol.
---

# property name

[JS](../../..) ⟩ [values](../..) ⟩ [object](..) ⟩ [property]() ⟩ name

{% hint style="success" %}
([str](../../prim/str "mention") / [symbol](../../prim/symbol "mention"))

a <mark style="color:purple;">**property name**</mark> <mark style="color:yellow;">**may b**</mark>e <mark style="color:red;">**any**</mark> [**String**](../../prim/str) <mark style="color:yellow;">**/**</mark> [**Symbol**](../../prim/symbol).&#x20;

(<mark style="color:yellow;">**any other**</mark> [..](../.. "mention") is <mark style="color:red;">**coerced**</mark> to <mark style="color:yellow;">**String**</mark>.)

```javascript
// defining properties
{
    age  : 26,                    // normal string property name
    1    : '1 is OK',              // normal string property name
    const: 'reserved word is OK',  // reserved word as property name
    "full name": "John Doe",       // string as property name
}

// accessing properties
obj . prop    // by identifier
obj [ prop ]  // by String / Symbol.
```
{% endhint %}

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="warning" %}
in [dot-notation-.](access/dot-notation-. "mention") <mark style="color:blue;">`obj.prop`</mark> syntax, the <mark style="color:blue;">`prop`</mark>：

* <mark style="color:red;">**must**</mark> be an [id](../../../grammar/token/id "mention"):exclamation:
* <mark style="color:green;">**can**</mark> be a [reserved](../../../grammar/token/keyword/reserved "mention"):exclamation:
{% endhint %}
{% endtab %}

{% tab title="🔴 主題" %}
* [dot-notation-.](access/dot-notation-. "mention")
* [bracket-notation](access/bracket-notation "mention")
* [computed](name/computed "mention")
{% endtab %}

{% tab title="💈範例" %}
* replit ⟩ [property name](https://replit.com/@pegasusroe/property-name#index.js)

```javascript
// a symbol
let symbol = Symbol('hi');

// an object
let obj = {
    
    // string as property name
    name        : 'normal property names are converted to strings ("name")',
    const       : '⭐ reserved word as property name is OK',
    1           : '⭐ 1 is legal property name, coerced to "1".',
    'full name' : 'string as property name',
    symbol      : 'this `symbol` is a normal string property name ("symbol")',
    
    // symbol as property name
    [symbol]    : 'symbol as property name',    // computed property name
};

obj['full name'],   // 'string as property name'
obj[symbol],        // 'symbol as property name'
obj.symbol,         // 'this `symbol` is a normal string property name ("symbol")'
obj.const,          // '⭐ reserved word as property name is OK'

obj[1],             // ✅ "bracket notation" is always safe.

// obj.1,           // ❗ "dot notation" requires an identifier
//    ^^            // ⛔ SyntaxError: Unexpected number

1 in obj,           // true (1 -> '1')
'1' in obj,         // true (normal string property name)
'name' in obj,      // true (normal string property name)
symbol in obj,      // true (symbol as property name)
'symbol' in obj,    // true (normal string property name)
```
{% endtab %}

{% tab title="📘 手冊" %}
* [ ] [Property accessors](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors) - access properties using dot/bracket notation.
  * [ ] [property name](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors#property_names)
{% endtab %}
{% endtabs %}
