> 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.md).

# object

[JS](/web/js.md) ⟩ [value](/web/js/val.md) ⟩ object

{% hint style="success" %}
an <mark style="color:yellow;">**unordered collection**</mark> of [**properties**](/web/js/val/obj/prop.md) ([**name**](/web/js/val/obj/prop/name.md) : [**value**](/web/js/val.md) pairs).

* [**inherits**](/web/js/val/obj/extend/inheritance.md) properties of <mark style="color:yellow;">**another**</mark>**&#x20;**<mark style="color:purple;">**object**</mark>, known as it's [**prototype**](/web/js/val/obj/proto.md).
* <mark style="color:red;">**any**</mark> [value](/web/js/val.md) that is <mark style="color:red;">**not**</mark> [primitive](/web/js/val/prim.md) <mark style="color:yellow;">**is**</mark> an <mark style="color:purple;">**object**</mark>.

```javascript
// creating objects
{name: value}                        // object literal
new Object()                         // `new` statement
let obj = Object.create(prototype)   // specify an object's prototype
```

:u6307: <mark style="color:yellow;">**synonyms**</mark>： "<mark style="color:purple;">**hash**</mark>", "<mark style="color:purple;">**hashtable**</mark>", "<mark style="color:purple;">**dictionary**</mark>", "<mark style="color:purple;">**associated array**</mark>".
{% endhint %}

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="success" %} <mark style="color:yellow;">**most common things**</mark> to do with <mark style="color:purple;">**objects**</mark>：

* [**create**](/web/js/val/obj/create.md) <mark style="color:purple;">**objects**</mark>.&#x20;
* [**access**](/web/js/val/obj/prop/access.md) (**get**/**set**, [**delete**](/web/js/val/obj/prop/create/delete.md) <mark style="color:yellow;">**/**</mark> [**test**](/web/js/val/obj/prop/test.md) <mark style="color:yellow;">**/**</mark> [**enumerate**](/web/js/val/obj/prop/enumerate.md)) their [**properties**](/web/js/val/obj/prop.md).
  {% endhint %}
  {% endtab %}

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

* :beginner: [<mark style="color:yellow;">**creating objects**</mark>](/web/js/val/obj/create.md)
  * [object literal](/web/js/val/obj/create/obj.md) <mark style="color:yellow;">**/**</mark> [new](/web/js/val/obj/create/new.md) <mark style="color:yellow;">**/**</mark> [Object.create()](/web/js/val/obj/create/object.create.md)
* :beginner: [<mark style="color:yellow;">**accessing properties**</mark>](/web/js/val/obj/prop/access.md)
  * [property access expression](/web/js/val/obj/prop/access/property-access-expression.md)
    * [dot notation (.)](/web/js/val/obj/prop/access/dot-notation-..md) <mark style="color:yellow;">**/**</mark> [bracket notation \[\]](/web/js/val/obj/prop/access/bracket-notation.md)
    * [optional chaining (?., ?.\[\])](/web/js/val/obj/prop/access/optional-chaining.md) <mark style="color:yellow;">**/**</mark> [optional invocation ?.()](/web/js/val/obj/prop/access/optional-invocation-..md)
  * [**delete**](/web/js/val/obj/prop/create/delete.md) <mark style="color:yellow;">**/**</mark> [**test**](/web/js/val/obj/prop/test.md) <mark style="color:yellow;">**/**</mark> [**enumerate**](/web/js/val/obj/prop/enumerate.md) properties
* :beginner: [<mark style="color:yellow;">**extending objects**</mark>](/web/js/val/obj/extend.md)
  * [Object.assign()](/web/js/val/obj/extend/object.assign.md) - copies properties from other objects.
  * [mixin](/web/js/val/obj/extend/mixin.md)
  * [inheritance](/web/js/val/obj/extend/inheritance.md)
    * [prototype](/web/js/val/obj/proto.md)
    * [prototype chain](/web/js/val/obj/proto/chain.md)
* :beginner: [<mark style="color:yellow;">**converting objects**</mark>](/web/js/val/obj/convert.md)
  * [serializing objects](/web/js/val/obj/convert/serializing-objects.md) - convert/restore object's state to/from string.
  * .toString() / .toLacaleString() - object -> string.
  * .valueOf() - object -> primitive (typically a number)
  * .toJSON() - a method expected by JSON.stringify()
    {% endtab %}

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

* use [optional chaining (?., ?.\[\])](/web/js/val/obj/prop/access/optional-chaining.md) to safely acess object's members.
* [literal](/web/js/grammar/token/literal.md)
* [event handler](/web/browser/event/handler.md) can be an [<mark style="color:orange;">**object**</mark>](/web/browser/event/handler/register/object-handler.md).
* the <mark style="color:blue;">**import**</mark> in [import.meta](/web/js/module/import.meta.md) is <mark style="color:red;">**NOT**</mark> an <mark style="color:purple;">**object**</mark>❗️
* <mark style="color:yellow;">**JS**</mark> <mark style="color:purple;">**object**</mark> <mark style="color:yellow;">**is**</mark> [associated array](/web/js/concept/associated-array.md).
  {% endtab %}

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

* [ ] ExploringJS ⟩ [14. New OOP features besides classes](https://exploringjs.com/es6/ch_oop-besides-classes.html)
* [ ] [JavaScript: The Definitive Guide](/web/master/ref/javascript-the-definitive-guide.md) ⟩ Ch. 6 Object
  {% endtab %}

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

* MDN ⟩ [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference) ⟩&#x20;
  * [JavaScript Guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide) ⟩ [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects)
  * [built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) ⟩&#x20;
    * [Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)
    * [Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function)
    * [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)
      {% endtab %}

{% tab title="🚧" %}

* [ ] accessor property
  {% endtab %}
  {% endtabs %}