JavaScript の for…x のループ記法には for…in と for…of があり何が違ったっけと調べた。

まとめ

• 反復可能オブジェクト（String, Array等）のループは for...of
• 反復不可能なオブジェクトのプロパティに順不同でアクセスするなら for...in

Document

for…of - JavaScript | MDN より引用。

for…of と for…in との違い

for…in および for…of 文は、両方とも何かに対する繰り返しです。これらの主な違いは何に対する繰り返しなのかというところです。

for…in 文は、オブジェクトのすべての列挙可能なプロパティに対して、順序不定で繰り返し処理を行います。

アクセスの順番が大事となる配列を繰り返す時には、数値のインデックスでの for ループ (か Array.prototype.forEach() か for…of ループ) を使った方が良いです。

for…in - JavaScript | MDN より引用。

for…in を使用する理由

for…in はオブジェクトのプロパティを反復するために作られたもの

最も具体的な使い方はデバッグ目的であるかもしれません。

試してみる

Array

for…of は要素が取得され, for…in は 配列の index が取得される。

> for (const n of [1,2,3]) { console.log(n) }
1
2
3
undefined

> for (const n in [1,2,3]) { console.log(n) }
0
1
2
undefined

String

for…of で一文字づつ取得され、 for..in は配列のindex.

> for (const n of "abc") { console.log(n) }
a
b
c
undefined

> for (const n in "abc") { console.log(n) }
0
1
2
undefined

Object

for…of はエラー、for…in はオブジェクトのプロパティ。

> for (const n of {a: 1, b: 2, c: 3}) { console.log(n) }
Uncaught:
TypeError: {(intermediate value)(intermediate value)(intermediate value)} is not iterable

> for (const n in {a: 1, b: 2, c: 3}) { console.log(n) }
a
b
c
undefined

for…of でも下記のようにすればループ可能。

> for (const n of Object.entries({a: 1, b: 2, c: 3})) { console.log(n) }
[ 'a', 1 ]
[ 'b', 2 ]
[ 'c', 3 ]
undefined
> for (const n of Object.keys({a: 1, b: 2, c: 3})) { console.log(n) }
a
b
c
undefined
> for (const n of Object.values({a: 1, b: 2, c: 3})) { console.log(n) }
1
2
3
undefined