# for-in

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

{% hint style="success" %}
iterates over all (<mark style="color:yellow;">**own**</mark>**/**<mark style="color:yellow;">**inherited**</mark>) [enumerable string properties](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties) of an [obj](https://lochiwei.gitbook.io/web/js/val/obj "mention") (<mark style="color:red;">**ignoring**</mark> properties keyed by [symbols](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol)).

```javascript
for (const <key> in obj) {}    // loop over "keys"
for (<variable> in obj) {}     
// <variable> can be a let/const/var, or an "lvalue" (assignment target). 
```

{% endhint %}

{% tabs %}
{% tab title="⭐️" %}
{% hint style="warning" %}
[const](https://lochiwei.gitbook.io/web/js/variable/declare/const "mention")&#x20;

* <mark style="color:green;">**can**</mark>**&#x20;**<mark style="color:yellow;">**be used**</mark> with <mark style="color:purple;">**for-in**</mark> / [of](https://lochiwei.gitbook.io/web/js/grammar/statement/loop/for/of "mention") 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-for-loop](https://lochiwei.gitbook.io/web/js/variable/declare/const/no-for-loop "mention"):exclamation:
{% endhint %}

{% hint style="danger" %}
⭐️ 注意： <mark style="color:blue;">`for...in`</mark>, <mark style="color:purple;">`for...of`</mark> 有 "[`(...)`](https://lochiwei.gitbook.io/web/js/grammar/token/punctuator/parentheses)" 括號❗️&#x20;

```javascript
for (let key   in object) {}    // loop over "keys"
for (let value of iterable) {}    // 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)
{% 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="in">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="of">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>

👉 [enumerate](https://lochiwei.gitbook.io/web/js/val/obj/prop/enumerate "mention") (📘 [MSN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties) )
{% endtab %}

{% tab title="👥" %}

* [iterable](https://lochiwei.gitbook.io/web/js/iteration/iterable "mention")
* [of](https://lochiwei.gitbook.io/web/js/grammar/statement/loop/for/of "mention")
* [pure-object](https://lochiwei.gitbook.io/web/js/val/obj/create/object.create/pure-object "mention") is an object without [**prototype**](https://lochiwei.gitbook.io/web/js/val/obj/proto).
* [arr.entries](https://lochiwei.gitbook.io/web/js/val/builtin/arr/method/arr.entries "mention")
* [lvalue](https://lochiwei.gitbook.io/web/js/grammar/op/term/lvalue "mention") can be used in <mark style="color:purple;">**for-in**</mark>/for-of.
* [parentheses](https://lochiwei.gitbook.io/web/js/grammar/token/punctuator/parentheses "mention") are used in <mark style="color:purple;">**for-in**</mark>/for-of.
  {% endtab %}

{% tab title="💈" %}

```javascript
let animal = {
  eats: true
};

let rabbit = {
  jumps: true,
  __proto__: animal
};

// own keys
Object.keys(rabbit)               // "jumps"

// inherited included
for(let prop in rabbit) log(prop) // "jumps", "eats"
```

{% 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](https://lochiwei.gitbook.io/web/master/ref/javascript-the-definitive-guide "mention") ⟩ 5.4.5 for/in
* [ ] [談談 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...in](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in) ⟩
  * [Deleted, added, or modified properties](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in#deleted_added_or_modified_properties) ⭐️
* [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 %}