> 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/create/obj.md).

# object literal

<details>

<summary>navigation links</summary>

* [JS](/web/js.md) ⟩ [value](/web/js/val.md) ⟩ [object](/web/js/val/obj.md) ⟩ [create](/web/js/val/obj/create.md) ⟩ object literal
* [JS](/web/js.md) ⟩ [grammar](/web/js/grammar.md) ⟩ [token](/web/js/grammar/token.md) ⟩ [literal](/web/js/grammar/token/literal.md) ⟩ object literal
* [JS](/web/js.md) ⟩ [statement](/web/js/grammar/statement.md) ⟩ [expression](/web/js/grammar/statement/expr.md) ⟩ [primary](/web/js/grammar/statement/expr/primary.md) ⟩ object literal

</details>

{% hint style="success" %}
([literal](/web/js/grammar/token/literal.md), [primary expression](/web/js/grammar/statement/expr/primary.md), [object](/web/js/val/obj.md))&#x20;

* [**comma-separated**](/web/js/grammar/token/punctuator/comma.md) <mark style="color:yellow;">**list**</mark> of [**`key:value`**](/web/js/grammar/token/punctuator/colon.md) <mark style="color:yellow;">**pairs**</mark> <mark style="color:yellow;">**in**</mark> [**`{...}`**](/web/js/grammar/token/punctuator/braces.md).
* its [value](/web/js/val.md) is an [object](/web/js/val/obj.md).

```javascript
let x = 1, y = 2;

let obj = {               // object literal

    // data properties
    x, y,                 // shorthand properties (same as `x: x, y: y`)
    [<expr>]: <value>,    // computed property name (`expr` can be a Symbol)
    <key>   : <value>,    // normal key-value pair
    
    // methods
    method  () {...},     // shorthand method (same as `method: function(){}`)
    [<expr>]() {...},     // computed method name
}
```

:u6307: synonyms： "<mark style="color:purple;">**object initializer**</mark>"
{% endhint %}

{% tabs %}
{% tab title="🔴 主題" %}

* <mark style="color:purple;">**object literal**</mark>
  * [object literal is not a block❗️](/web/js/val/obj/create/obj/not-block.md)
* <mark style="color:yellow;">**related topics**</mark>
  * [shorthand property](/web/js/val/obj/prop/shorthand.md)
  * [computed property name](/web/js/val/obj/prop/name/computed.md)
    {% endtab %}

{% tab title="⭐️ 重點" %}
{% hint style="info" %}
all <mark style="color:yellow;">**objects**</mark> created by <mark style="color:purple;">**object literals**</mark> have the <mark style="color:orange;">**same**</mark> [**prototype**](/web/js/val/obj/proto.md) -  [**Object.prototype**](/web/js/val/builtin/object/object.prototype.md).
{% endhint %}

{% hint style="info" %}
a [**trailing comma**](/web/js/grammar/token/literal/trailing-comma.md) <mark style="color:yellow;">**following the**</mark>**&#x20;**<mark style="color:red;">**last**</mark>**&#x20;**<mark style="color:yellow;">**property**</mark> in an <mark style="color:purple;">**object literal**</mark> is <mark style="color:green;">**legal**</mark>.
{% endhint %}
{% endtab %}

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

* :bulb: a [literal](/web/js/grammar/token/literal.md) <mark style="color:yellow;">**is**</mark> an [expression](/web/js/grammar/statement/expr.md).
* [**Symbols**](/web/js/val/prim/symbol.md) can be used as [**computed property names**](/web/js/val/obj/prop/name/computed.md).
* :point\_right:[array literal](/web/js/val/builtin/arr/create/arr.md)
* :exclamation:[arrow function returning object literal needs (...)❗️](/web/js/val/func/arrow/return-obj-literal.md)
* [**...obj**](/web/js/grammar/op/spread.md) adds [**all enumerable own**](/web/js/val/obj/prop/enumerate.md) <mark style="color:yellow;">**properties**</mark> of an **object** to an <mark style="color:purple;">**object literal**</mark>.
  {% endtab %}

{% tab title="📗 參考" %}

* [ ] [JavaScript: The Definitive Guide](/web/master/ref/javascript-the-definitive-guide.md) ⟩&#x20;
  * [x] 4.2：Object / Array Initializers
  * [ ] 6.10： Extended Object Literal Syntax
    {% endtab %}

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

* [ ] [object literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#object_literals)
* [ ] [Expressions and operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) ⟩ [Object initializer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer)
  {% endtab %}
  {% endtabs %}