for…ofとfor…inの違い | for…of | JavaScript 超完全入門基本から発展までのすべて

INDEX

for...ofとは？

for...ofは、配列やSet、Map、文字列などの反復可能オブジェクト（iterable）の要素を順番に取り出して処理するための繰り返し構文です。インデックスではなく要素そのものを取得できるため、配列を扱う際によく利用されます。

for...inは、オブジェクトのプロパティ名（キー）を列挙するための構文です。配列に対して使用することもできますが、配列の処理には適しておらず、現在では配列にはfor...ofや通常のfor文を使用することが推奨されています。

配列の要素を順番に取り出して処理する例です。

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

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

実行結果

この例では、配列の各要素が順番にfruitへ代入されます。

オブジェクトのプロパティを列挙する例です。

const user = {
    name: "Taro",
    age: 25,
    city: "Tokyo"
};

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

実行結果

keyにはプロパティ名が入り、user[key]で対応する値を取得しています。

配列はオブジェクトの一種であるため、独自のプロパティを追加できます。そのため、for...inでは配列の要素以外も列挙される可能性があります。

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

fruits.color = "red";

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

実行結果

このように、追加したcolorプロパティまで列挙されるため、配列を処理する用途には適していません。

for...ofは配列だけでなく、反復可能オブジェクトであれば同じように利用できます。

const text = "Java";

for (const ch of text) {
    console.log(ch);
}

1文字ずつ取り出して処理できます。

const numbers = new Set([10, 20, 30]);

for (const value of numbers) {
    console.log(value);
}

Setの各要素を順番に取得できます。