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

# for-of

\`for ( const value of iterable)\` syntax. 🚧 -> TypeError

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

{% hint style="success" %}
[⭐️ ES6 (2015)](/web/js/feature/es6.md)

```javascript
for (const value of iterable) {}      // loop over "values"
for (lvalue of iterable) {}           // lvalue can be used
for (const [key, value] of aMap) {}   // iterate over a Map.
```

{% endhint %}

{% tabs %}
{% tab title="🧨" %}
{% hint style="danger" %}
(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

// workarounds
for (let key of Object.keys(obj) { ... }
for (let key in obj) { ... }                // for-in
for (let value of Object.values(obj) { ... }
for (let [key, value] of Object.entries(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 %}

{% hint style="warning" %}
[arrays are iterated "live"❗️](/web/js/grammar/statement/loop/for/of/live-array.md)
{% endhint %}
{% endtab %}

{% tab title="⭐️" %}
{% hint style="warning" %}
[const](/web/js/variable/declare/const.md)&#x20;

* <mark style="color:green;">**can**</mark>**&#x20;**<mark style="color:yellow;">**be used**</mark> with [for-in](/web/js/grammar/statement/loop/for/in.md) / <mark style="color:purple;">**for-of**</mark> loop.
* <mark style="color:red;">**can't**</mark> <mark style="color:yellow;">**be used**</mark> with a <mark style="color:yellow;">**classic for-loop**</mark>.&#x20;

👉 [no const for classic "for"](/web/js/variable/declare/const/no-for-loop.md):exclamation:
{% endhint %}

{% hint style="danger" %}
⭐️ 注意： [for-in](/web/js/grammar/statement/loop/for/in.md), <mark style="color:purple;">**for-of**</mark> 有 "<mark style="color:orange;">`(...)`</mark>" 括號❗️&#x20;

```javascript
for (let key   in object) {}    // loop over "keys"
for (let value of object) {}    // loop over "values"
//  ^                   ^       // ⭐️ ( ... )
```

{% endhint %}

👉 [Property flags and descriptors - “flags-aware” clone](bear://x-callback-url/open-note?id=41723F13-7999-4074-9588-ABEDA8BB7D32-1246-000005CEF0656512\&header=%E2%80%9Cflags-aware%E2%80%9D%20clone)٭

{% hint style="info" %}

* [Reflect.ownKeys()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Reflect/ownKeys)  ≈\
  [.getOwnPropertyNames()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames) + [.getOwnPropertySymbols()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols)

* [obj.hasOwnProperty()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty) ≈ [Object.getOwnPropertyNames()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames)&#x20;

* <mark style="color:purple;">`Object.entries()`</mark> ≈ <mark style="color:purple;">`Object.keys()`</mark> + <mark style="color:purple;">`Object.values()`</mark>
  {% endhint %}

* <mark style="color:yellow;">**`≈`**</mark> ：代表「範圍一樣」
  {% endtab %}

{% tab title="🔴" %}

* [for-of with objects](/web/js/grammar/statement/loop/for/of/with-object.md)
* [for-in vs. for-of vs. in](/web/js/grammar/statement/loop/for/for-in-vs.-for-of-vs.-in.md)
* [for-of vs. forEach](/web/js/grammar/statement/loop/for/of/vs-foreach.md)
* [arrays are iterated "live"❗️](/web/js/grammar/statement/loop/for/of/live-array.md)
  {% endtab %}

{% tab title="🗺️" %}
&#x20;✅：<mark style="color:green;">**string / symbol**</mark>  |  ❌：<mark style="color:red;">**not available**</mark>  |  🔤：String  | 🔺：Symbol

<table><thead><tr><th width="282">method/operator</th><th width="89">own enum<select><option value="fa493c02131745babc72fa4cfd60f1bf" label="✅" color="blue"></option><option value="575cf73897dd4bbab4db839c76bf6f75" label="❌" color="blue"></option><option value="c6f507edd61f4f1f91a69d2c98ee17b9" label="🔤" color="blue"></option><option value="42baee63b5df424b8d1718fcad2a1700" label="🔺" color="blue"></option></select></th><th width="105">own nonenum<select><option value="92aacf9c25cc45758898e9cea377838c" label="✅" color="blue"></option><option value="186e2fd65cb541ed828129ae4de3338d" label="❌" color="blue"></option><option value="2412011063cb469a831045674ba4de1b" label="🔤" color="blue"></option><option value="1fd8ca36728a49a180716097753710dd" label="🔺" color="blue"></option></select></th><th width="101">inherited enum<select><option value="ae58de58a03140a1ac9a7bb88c048855" label="✅" color="blue"></option><option value="ca78ad327cf849e5921fd1334fab4b59" label="❌" color="blue"></option><option value="8ecf7ff7d50d44af8f3a3a6978771c0e" label="🔤" color="blue"></option></select></th><th width="107">inherited nonenum<select><option value="2029a71aaf8c4baaac53af637338d80b" label="✅" color="blue"></option><option value="50730b3459424472be062a6ecb9f9fad" label="❌" color="blue"></option></select></th></tr></thead><tbody><tr><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign">.assign()</a> </td><td><span data-option="fa493c02131745babc72fa4cfd60f1bf">✅</span></td><td><span data-option="186e2fd65cb541ed828129ae4de3338d">❌</span></td><td><span data-option="ca78ad327cf849e5921fd1334fab4b59">❌</span></td><td><span data-option="50730b3459424472be062a6ecb9f9fad">❌</span></td></tr><tr><td> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax">Object spread</a> </td><td><span data-option="fa493c02131745babc72fa4cfd60f1bf">✅</span></td><td><span data-option="186e2fd65cb541ed828129ae4de3338d">❌</span></td><td><span data-option="ca78ad327cf849e5921fd1334fab4b59">❌</span></td><td><span data-option="50730b3459424472be062a6ecb9f9fad">❌</span></td></tr><tr><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">.keys()</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values">.values()</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries">.entries()</a></td><td><span data-option="c6f507edd61f4f1f91a69d2c98ee17b9">🔤</span></td><td><span data-option="186e2fd65cb541ed828129ae4de3338d">❌</span></td><td><span data-option="ca78ad327cf849e5921fd1334fab4b59">❌</span></td><td><span data-option="50730b3459424472be062a6ecb9f9fad">❌</span></td></tr><tr><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames">.getOwnPropertyNames()</a> </td><td><span data-option="c6f507edd61f4f1f91a69d2c98ee17b9">🔤</span></td><td><span data-option="2412011063cb469a831045674ba4de1b">🔤</span></td><td><span data-option="ca78ad327cf849e5921fd1334fab4b59">❌</span></td><td><span data-option="50730b3459424472be062a6ecb9f9fad">❌</span></td></tr><tr><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols">.getOwnPropertySymbols()</a> </td><td><span data-option="42baee63b5df424b8d1718fcad2a1700">🔺</span></td><td><span data-option="1fd8ca36728a49a180716097753710dd">🔺</span></td><td><span data-option="ca78ad327cf849e5921fd1334fab4b59">❌</span></td><td><span data-option="50730b3459424472be062a6ecb9f9fad">❌</span></td></tr><tr><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptors">.getOwnPropertyDescriptors()</a> </td><td><span data-option="fa493c02131745babc72fa4cfd60f1bf">✅</span></td><td><span data-option="92aacf9c25cc45758898e9cea377838c">✅</span></td><td><span data-option="ca78ad327cf849e5921fd1334fab4b59">❌</span></td><td><span data-option="50730b3459424472be062a6ecb9f9fad">❌</span></td></tr><tr><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Reflect/ownKeys">Reflect.ownKeys()</a> </td><td><span data-option="fa493c02131745babc72fa4cfd60f1bf">✅</span></td><td><span data-option="92aacf9c25cc45758898e9cea377838c">✅</span></td><td><span data-option="ca78ad327cf849e5921fd1334fab4b59">❌</span></td><td><span data-option="50730b3459424472be062a6ecb9f9fad">❌</span></td></tr><tr><td><a data-mention href="/web/js/grammar/statement/loop/for/in.md">for-in</a> (loop over keys)</td><td><span data-option="c6f507edd61f4f1f91a69d2c98ee17b9">🔤</span></td><td><span data-option="186e2fd65cb541ed828129ae4de3338d">❌</span></td><td><span data-option="8ecf7ff7d50d44af8f3a3a6978771c0e">🔤</span></td><td><span data-option="50730b3459424472be062a6ecb9f9fad">❌</span></td></tr><tr><td><a data-mention href="/web/js/grammar/statement/loop/for/of.md">for-of</a> (loop over values)</td><td><span data-option="c6f507edd61f4f1f91a69d2c98ee17b9">🔤</span></td><td><span data-option="186e2fd65cb541ed828129ae4de3338d">❌</span></td><td><span data-option="8ecf7ff7d50d44af8f3a3a6978771c0e">🔤</span></td><td><span data-option="50730b3459424472be062a6ecb9f9fad">❌</span></td></tr></tbody></table>

👉 [property enumeration](/web/js/val/obj/prop/enumerate.md) (📘 [MSN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties) )
{% endtab %}

{% tab title="👥" %}

* [iterable](/web/js/iteration/iterable.md)
* [for-in](/web/js/grammar/statement/loop/for/in.md) / [for-in vs. for-of vs. in](/web/js/grammar/statement/loop/for/for-in-vs.-for-of-vs.-in.md)
* [lvalue](/web/js/grammar/op/term/lvalue.md) can be used to receive the iteration value of a <mark style="color:purple;">**for-of**</mark> loop.
* ["pure" object](/web/js/val/obj/create/object.create/pure-object.md) is an object without [**prototype**](/web/js/val/obj/proto.md).
* [arr.entries](/web/js/val/builtin/arr/method/arr.entries.md)
  {% endtab %}

{% tab title="📗" %}

* [ ] JS.info ⟩ prototypal inheritance ⟩ [for...in](https://javascript.info/prototype-inheritance#for-in-loop) \
  iterates over (**enumerable**) <mark style="color:orange;">**properties**</mark> (<mark style="color:orange;">**inherited**</mark> properties **included**)
* [ ] [JavaScript: The Definitive Guide](/web/master/ref/javascript-the-definitive-guide.md) ⟩ 5.4.4 for/of loop
* [ ] [談談 JavaScript 中 for ... in](https://pjchender.blogspot.com/2016/06/javascript-for-in-function.html)
* [ ] [for...in 與 for...of 的差別](https://kanboo.github.io/2018/01/30/JS-for-of-forin/)
* [ ] [JavaScript 之旅 (4)：Object.keys() & Object.values() & Object.entries()](https://titangene.github.io/article/javascript-object-keys-values-entries.html) ⭐️&#x20;
* [ ] [JavaScript traits: the clean way to modify global prototypes](https://itnext.io/straits-9ef2b9a563cd)
  {% 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 %}

{% tab title="🚧" %}

* ```
  for (let value of obj) { }        // TypeError
  ```

{% endtab %}
{% endtabs %}