配列に対するfor…inの注意点 | for…in | JavaScript 超完全入門基本から発展までのすべて

INDEX

for...inとは？

for...inは、オブジェクトのプロパティ名（キー）を順番に取り出すための構文です。

オブジェクトを繰り返し処理する場合には便利ですが、配列に対して使用すると予期しない動作になることがあるため、一般的には配列では使用しないことが推奨されています。

for...inは、本来オブジェクトのプロパティを列挙するために使用します。


const person = {
    name: "Taro",
    age: 20
};

for (const key in person) {
    console.log(key + ": " + person[key]);
}

実行結果


name: Taro
age: 20

このように、プロパティ名を順番に取得できます。

配列に対して使用すると、インデックス（キー）が取得されます。


const fruits = ["apple", "banana", "orange"];

for (const index in fruits) {
    console.log(index + ": " + fruits[index]);
}

実行結果


0: apple
1: banana
2: orange

一見問題なく見えますが、配列にはfor...inを使用しないほうが安全です。

JavaScriptの配列はオブジェクトでもあるため、独自のプロパティを追加できます。


const fruits = ["apple", "banana", "orange"];

fruits.color = "red";

for (const index in fruits) {
    console.log(index + ": " + fruits[index]);
}

実行結果


0: apple
1: banana
2: orange
color: red

インデックス以外のプロパティまで列挙されるため、配列のループとしては適していません。

配列を繰り返し処理する場合は、for...ofを使用するのが一般的です。


const fruits = ["apple", "banana", "orange"];

for (const fruit of fruits) {
    console.log(fruit);
}

実行結果


apple
banana
orange

for...ofは配列の要素だけを取得するため、安全に利用できます。

インデックスが必要な場合は、通常のfor文もよく利用されます。


const fruits = ["apple", "banana", "orange"];

for (let i = 0; i < fruits.length; i++) {
    console.log(i + ": " + fruits[i]);
}

実行結果


0: apple
1: banana
2: orange

インデックスが必要な場合は、この方法が最も分かりやすく確実です。

構文	対象	取得できるもの	主な用途
`for`	配列	インデックスを自分で管理	インデックスが必要な処理
`for...in`	オブジェクト	プロパティ名（キー）	オブジェクトの列挙
`for...of`	配列・文字列など	要素の値	配列の繰り返し処理