前のページへ
反復処理 		次のページへ
反復処理プロトコル Iteration protocols

for..in と for..of

《 初回公開：2023/10/19 , 最終更新：未 》

for文にもいろいろあって、C言語から受け継いでいるfor文は

Javascriptには他にもfor..in と for..of というのがあって、
ChartGPTに説明してもらうと

JavaScriptには、for..inループとfor..ofループの2つの異なる種類のループがあります。
for..inループはオブジェクトのプロパティに対して繰り返し処理を行います。例えば、以下のようにオブジェクトpersonのプロパティに対して繰り返し処理を行います。

const person = { name: 'John', age: 30, gender: 'male' };
for (const key in person) {
  console.log(`${key}: ${person[key]}`);
}

上記の例では、personオブジェクトのプロパティであるname、age、genderのキーと、それぞれの値が表示されます。for..inループは、オブジェクトのプロパティの繰り返し処理に適しています。
for..ofループは、反復可能オブジェクトに対して繰り返し処理を行います。反復可能オブジェクトは、配列、文字列、Set、Map、ジェネレーターなどのオブジェクトを含みます。以下は、配列を反復処理する例です。

const array = [1, 2, 3, 4, 5];
for (const value of array) {
  console.log(value);
}

上記の例では、array配列の各要素が順番に表示されます。for..ofループは、反復可能オブジェクトの繰り返し処理に適しています。

おもな違いとしては、for...inの処理対象は連想配列としてのオブジェクトの要素であるのに対して、for...ofの処理対象は配列などの反復可能オブジェクトである事。

for...in および for...of 文は、両方とも何かに対する繰り返しです。これらの主な違いは何に対する繰り返しなのかというところです。
for...in 文は、オブジェクトのすべての列挙可能なプロパティに対して、順序不定で繰り返し処理を行います。
for...of 文は、反復可能なオブジェクトが定義した順序で値を反復処理します。

for...in 文で注意しなければならないのは、
オブジェクトの列挙可能でないプロパティはfor...in 文では列挙されない。
Symbolがキーになっているプロパティも列挙されない。
そして、オブジェクト自身が所有するプロパティだけでなく、余分なプロトタイプチェーンをたどって継承されたプロパティも列挙されてしまう事。

const Sym = Symbol("Sym")
const obj = {
  [Sym]: "シンボルをキーとするプロパティ",
  ownProp: "オブジェクト自身が所有するプロパティ"
}
obj.__proto__ = { protoProp: "余分なプロトタイプチェーンをたどって継承されたプロパティ" };

for (const key in obj) {
  console.log(`${key}: ${obj[key]}`);
}

実行結果

ownProp: オブジェクト自身が所有するプロパティ
protoProp: 余分なプロトタイプチェーンをたどって継承されたプロパティ

for...of 文は分割代入と組み合わせる事によって更に高度で便利な応用が可能。

ページのトップへ戻る