# for-of with objects

[JS](../../../../..)⟩ [syntax](broken-reference) ⟩ [for loops](..) ⟩ [for-of]() ⟩ with objects

{% hint style="warning" %}
(by default) [obj](../../../../../val/obj "mention") <mark style="color:yellow;">**is**</mark>**&#x20;**<mark style="color:red;">**not**</mark> [iterable](../../../../../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](../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](live-array "mention")
{% endhint %}
{% endtab %}

{% tab title="👥" %}
* [iterable](../../../../../iteration/iterable "mention")
* [in](../in "mention")
* [arr.entries](../../../../../val/builtin/arr/method/arr.entries "mention")
{% endtab %}

{% tab title="📗" %}
* [ ] [javascript-the-definitive-guide](../../../../../../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 %}
