JavaScript における for...in と for...of の違いを詳解

JavaScript には、for...infor...of という 2 つの一般的なループ構文がありますが、これらは文法的には似ているものの、適用シナリオと機能に違いがあります。この記事では、これら 2 つのループの違いを詳しく説明し、例を通じてどのように使用するかをより深く理解していただけるようにします。

1. for...in

for...in は、オブジェクトの列挙可能なプロパティ、すなわちオブジェクトのキー(プロパティ名)を反復処理するために使用されます。これは、オブジェクト自身のプロパティだけでなく、プロトタイプチェーンから継承されたプロパティも処理するため、通常のオブジェクトを処理する際によく使用されます。

例:

1
const obj = { a: 1, b: 2, c: 3 };
2
3
for (const key in obj) {
4
console.log(key); // 出力: a, b, c
5
}
  • 特徴:

    • for...in はオブジェクトのキー(プロパティ名や配列のインデックス)を反復処理します。
    • すべての列挙可能なプロパティを反復処理し、継承されたプロパティも含まれます。
    • 反復順序は挿入順ではないため、順序が重要な場合には不向きです。
  • 適用シナリオ:

    • オブジェクトのプロパティを反復処理する場合。
    • 配列の反復処理には推奨されません。for...in はインデックスのみを反復処理し、順序が信頼できないためです。

2. for...of

for...of は、反復可能なオブジェクト(配列、文字列、Map、Set など)の要素を反復処理するために使用されます。for...in とは異なり、for...of はオブジェクトのキーではなく、値に焦点を当てるため、配列や文字列などの反復可能なオブジェクトの処理に適しています。

例:

1
const arr = [1, 2, 3];
2
3
for (const value of arr) {
4
console.log(value); // 出力: 1, 2, 3
5
}
  • 特徴:

    • for...of は反復可能なオブジェクトの値を反復処理します。
    • 配列、文字列、Set、Map など、すべての反復可能なオブジェクトに適用されます。
    • 通常のオブジェクトには適用されません。オブジェクトは反復可能ではないためです。
  • 適用シナリオ:

    • 配列、文字列、Set、Map などの反復可能なオブジェクトの値を反復処理する場合。
    • オブジェクトのプロパティの反復処理には不向きです。

違いのまとめ

  1. 反復内容の違い:

    • for...in はオブジェクトのキー(プロパティ名またはインデックス)を反復処理します。
    • for...of は反復可能なオブジェクトの値を反復処理します。
  2. 適用オブジェクトの違い:

    • for...in はオブジェクトの反復処理に適しており、配列のインデックスを反復処理することもできます(推奨されませんが)。
    • for...of は反復可能なオブジェクト(配列、文字列、Map、Set など)に適しています。

例の比較

1
const arr = ["a", "b", "c"];
2
3
// for...in はインデックス(キー)を反復処理します
4
for (const index in arr) {
5
console.log(index); // 出力: 0, 1, 2
6
}
7
8
// for...of は値を反復処理します
9
for (const value of arr) {
10
console.log(value); // 出力: 'a', 'b', 'c'
11
}

使用の推奨

  • オブジェクトのプロパティを反復処理する必要がある場合は、for...in を使用することをお勧めします。
  • 配列や他の反復可能なオブジェクトの値を反復処理する必要がある場合は、for...of を使用することをお勧めします。