JavaScriptで配列の反復に「for...in」を使うのはなぜ悪いのか？理由と代替手段を解説

JavaScriptでfor...inによる配列の反復が推奨されない理由

JavaScriptでは、for...inループを使って配列を反復処理することは避けるべきだとされています。その主な理由は、予期しない挙動を引き起こす可能性があるためです。具体的な例を見てみましょう。

通常のforループを使用した場合

まず、一般的なforループで配列を反復処理した例です。

let arr = []
arr[4] = 5
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i])
}

出力結果

undefined
undefined
undefined
undefined
5

インデックス0〜3には値が存在しないためundefinedが出力され、最後に5が出力されます。つまり、配列の全要素（length分）が順番に処理されているのがわかります。

for...inを使用した場合

同じ配列をfor...in構文で反復すると、結果は次のようになります。

let arr = []
arr[4] = 5
for (let i in arr) {
    console.log(arr[i])
}

出力結果

5

ここで注目すべきは、配列のlengthは5であるにもかかわらず、実際には1つの値しか反復されていないという点です。値が存在しないインデックス（空の要素）は完全にスキップされています。

このような挙動になる原因

for...inの本来の目的はオブジェクトのプロパティ列挙

この現象が起きるのは、for...in文の本来の目的がオブジェクトのプロパティを列挙することにあるためです。配列もJavaScriptでは一種のオブジェクトであり、インデックスは文字列形式のプロパティキーとして扱われます。そのため、値が代入されたプロパティだけが列挙対象となるのです。

プロトタイプチェーンまで遡って列挙される

さらに注意すべき点として、for...inはプロトタイプチェーンをさかのぼり、継承されたプロパティも列挙します。例えば、Array.prototypeに独自のメソッドやプロパティを追加している場合、それらまで一緒に列挙されてしまうことがあります。これは多くの場合、開発者が意図しない動作です。

代わりに使うべき方法

配列を安全に反復処理するには、以下の方法が推奨されます。

• for...of：イテラブルの値を直接反復でき、空要素も含めて正しく扱えます。
• Array.prototype.forEach()：コールバック関数で各要素を簡潔に処理できます。
• 従来のforループ：インデックスを明示的に制御したい場合に有効です。

まとめると、for...inはオブジェクトのプロパティ列挙用の構文であり、配列の反復には適していません。空の要素のスキップやプロトタイプチェーンの列挙といった落とし穴を避けるためにも、配列にはfor...ofやforEach()を使用しましょう。