JavaScriptにおけるfor-inループでの配列走査の間違い

配列を走査するには、for-ofループを使用するべきです。しかし、初心者が誤ってfor-inループを適用しようとすることがあります。この間違いの典型的な特徴を見てみましょう。

次のような配列があるとします：

let arr = ['a', 'b', 'c'];

この配列の要素を走査し、1つの文字列に連結してみましょう。

あるプログラマーは既にこの課題を解決しようとしましたが、誤ってfor-inループを使ってしまいました。その結果を見てみましょう：

let res = '';

for (let elem in arr) {
	res += elem;
}

console.log(res); // '012' と表示される

結果は'abc'ではなく、'012'という文字列になりました。なぜこのようになったのか、理由を探ってみましょう。

そもそも、なぜfor-inで配列が走査できてしまったのでしょうか？その理由は、JavaScriptにおける配列がオブジェクトの一種であるからです。したがって、技術的にはこのコードは「正しい」のです。しかし、このような使い方はすべきではありません。

なぜなら、for-inは特定の条件下で余計なものを取り込んでしまう可能性があり、配列の要素に加えて、望ましくない何かが走査に含まれてしまう恐れがあるからです。配列は必ずfor-ofを使って走査してください。

次に、なぜこのような奇妙な結果が得られたのかを理解しましょう。理由は、for-inを使って走査すると、変数名elemが誤解を招くものではありますが、実際にはこの変数にはキー（インデックス）が代入されるからです。

では、この間違いを修正し、正しいコードを書いてみましょう：

let arr = ['a', 'b', 'c'];
let res = '';

for (let elem of arr) {
	res += elem;
}

console.log(res); // 'abc' と表示される