> 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/grammar/statement/loop/for/of/with-object.md).

# for-of with objects

[JS](/web/js.md)⟩ [syntax](broken://pages/-MkkESuTtsNsTLnJJJUC) ⟩ [for loops](/web/js/grammar/statement/loop/for.md) ⟩ [for-of](/web/js/grammar/statement/loop/for/of.md) ⟩ with objects

{% hint style="warning" %}
(by default) [object](/web/js/val/obj.md) <mark style="color:yellow;">**is**</mark>**&#x20;**<mark style="color:red;">**not**</mark> [iterable](/web/js/iteration/iterable.md):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](/web/js/grammar/statement/loop/for/for-in-vs.-for-of-vs.-in.md)
{% 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：[arrays are iterated "live"❗️](/web/js/grammar/statement/loop/for/of/live-array.md)
{% endhint %}
{% endtab %}

{% tab title="👥" %}

* [iterable](/web/js/iteration/iterable.md)
* [for-in](/web/js/grammar/statement/loop/for/in.md)
* [arr.entries](/web/js/val/builtin/arr/method/arr.entries.md)
  {% endtab %}

{% tab title="📗" %}

* [ ] [JavaScript: The Definitive Guide](/web/master/ref/javascript-the-definitive-guide.md) ⟩ 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 %}