配列に対して`for`ループを回そうとした時にちょっと失敗した話

はじめに

私が仕事で書いていたコードで、配列に対するforループを書いた時、想定外の結果が出てしまったことについて書いていきます。

JavaScriptのfor文について

JavaScriptでは、forを用いる構文が幾つかあります。
まず、C言語等を扱ったことがある方にはお馴染みの

for (let index = 0; index < 20; index++) {
  // 処理
}

があります。
また、オブジェクト指向言語ではよくある、配列やオブジェクトの中身を直接用いることができる、

for (const element of array) {// 実際は「array」のところには、配列に限らず「反復可能オブジェクト」であれば何でも入れることができる
  // 処理
}

for (const key in object) {// keyにはオブジェクトのキーが代入される
  // 処理
}

という記法を用いることができます。
ここでは書きませんが、非同期の反復可能オブジェクトに対しての構文もあります。

実際に書いてしまった内容

以上軽く説明しましたが、私が実際にコードを書いた時、ドキュメントをチラ見してうろ覚えで書いてしまった結果が以下になります。

for (const element in array) {
  // 処理
}

これを書いて実行した結果何が起こったかと言いますと、「elementが配列の要素ではなく、配列のindex(数字)になってしまった」です。

説明

上記で、for..in構文ではObjectに対して用い、そのkeyが代入されると説明しましたが、配列も内部的にはそのindex(数字)をkeyとして持つObjectとみなすことができるようです。
そのため、配列に対してfor..in構文を用いると、内部的に持っているkey(index)を代入してしまうようです。

おわりに

ドキュメントはしっかり読みましょう…(自戒)