# for-of with objects

[JS](https://lochiwei.gitbook.io/web/js)⟩ [syntax](https://lochiwei.gitbook.io/web/js/grammar/statement/loop/for/of/broken-reference) ⟩ [for loops](https://lochiwei.gitbook.io/web/js/grammar/statement/loop/for) ⟩ [for-of](https://lochiwei.gitbook.io/web/js/grammar/statement/loop/for/of) ⟩ with objects

{% hint style="warning" %}
(by default) [obj](https://lochiwei.gitbook.io/web/js/val/obj "mention") <mark style="color:yellow;">**is**</mark>**&#x20;**<mark style="color:red;">**not**</mark> [iterable](https://lochiwei.gitbook.io/web/js/iteration/iterable "mention"):exclamation:

```javascript
let obj = { x: 1, y: 2, z: 3 };
for (let value of obj) { }                 // TypeError

// use Object.keys/values/entries
for (let key of Object.keys(obj) { ... }
for (let value of Object.values(obj) { ... }
for (let [key, value] of Object.entries(obj) { ... }

// or for-in
for (let key in obj) { ... }                
```

:point\_right: [for-in-vs.-for-of-vs.-in](https://lochiwei.gitbook.io/web/js/grammar/statement/loop/for/for-in-vs.-for-of-vs.-in "mention")
{% endhint %}

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="warning" %}
the iteration of <mark style="color:blue;">`Object.keys()`</mark> is <mark style="color:red;">**not**</mark>**&#x20;**<mark style="color:yellow;">**live**</mark> as the example：[live-array](https://lochiwei.gitbook.io/web/js/grammar/statement/loop/for/of/live-array "mention")
{% endhint %}
{% endtab %}

{% tab title="👥" %}

* [iterable](https://lochiwei.gitbook.io/web/js/iteration/iterable "mention")
* [in](https://lochiwei.gitbook.io/web/js/grammar/statement/loop/for/in "mention")
* [arr.entries](https://lochiwei.gitbook.io/web/js/val/builtin/arr/method/arr.entries "mention")
  {% endtab %}

{% tab title="📗" %}

* [ ] [javascript-the-definitive-guide](https://lochiwei.gitbook.io/web/master/ref/javascript-the-definitive-guide "mention") ⟩ 5.4.4 for/of loop
  {% endtab %}

{% tab title="📘" %}

* [ ] [for...of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of)
* [ ] [Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object) ⟩
  * [Object.keys()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys)
  * [Object.values()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values)
  * [Object.entries()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries)
* [ ] Object.prototype ⟩
  * [.hasOwnProperty()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty)
* [ ] &#x20;["in" operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/in)
  {% endtab %}
  {% endtabs %}