for...in文を使った繰り返し処理

JavaScript で繰り返し処理を行う方法のひとつである for...in 文の使い方について解説します。 for...in 文ではオブジェクトに含まれるプロパティ名を順に取得します。

(Last modified: 2023年02月03日)

for...in文の基本書式

for...in 文ではオブジェクトに含まれるプロパティ名を順に取得ことができます。書式は次の通りです。

for (変数名 in オブジェクト){
  実行する文1;
  実行する文2;
  ...
}

繰り返し実行する文が 1 つだけだった場合にはブロックを表す {} を省略することができます。

for (変数名 in オブジェクト)
  実行する文;

例えば次のようにオブジェクトリテラルを例に試してみます。

このオブジェクトには 3 つのプロパティが含まれており、 for...in 文を使うことでそれぞれのプロパティ名である orange, apple, lemon を順に取得します。次のサンプルをみてください。

const fruit = {orange:170, apple:90, lemon:110};

for (let i in fruit){
  console.log("fruit." + i + ' = ' + fruit[i]);
}

console.log('end');

for...in 文ではまずオブジェクトを評価します。

for (let i in fruit){
  console.log("fruit." + i + ' = ' + fruit[i]);
}

オブジェクトが null または undefined だった場合には for...in 文の次の処理へ移ります。それ以外だった場合にはオブジェクトからプロパティ名が変数に格納され、そのあとでブロック内の処理が実行されます。

for (let i in fruit){
  console.log("fruit." + i + ' = ' + fruit[i]);
}

この時、プロパティ名は文字列の値として変数に格納されます。そのため、プロパティ名を使ってプロパティの値を参照する場合は、 オブジェクト名.プロパティ名 の形式ではなく オブジェクト名[プロパティ名] の形式を使用する必要があります。

※ プロパティへのアクセス方法に関する詳細は「プロパティの値の取得と新しい値の代入」を参照されてください。

ブロック内の処理をすべて実行したら、再び最初に戻りオブジェクトの評価を行います。オブジェクトが null を返すまで繰り返します。

実際に先ほどのサンプルを実行してみると、次のようにコンソールに出力されます。

const fruit = {orange:170, apple:90, lemon:110};

for (let i in fruit){
  console.log("fruit." + i + ' = ' + fruit[i]);
}

console.log('end');
>> fruit.orange = 170
>> fruit.apple = 90
>> fruit.lemon = 110
>> end

for...in文を配列に対して使用する

for...in文はオブジェクトのひとつである配列に対しても使用することができます。配列の場合はプロパティ名ではなくインデックスを順に取得します。

次のサンプルをみてください。

const fruit = ['orange', 'apple', 'lemon'];

for (let i in fruit){
  console.log("fruit." + i + ' = ' + fruit[i]);
}

console.log('end');
>> fruit.0 = orange
>> fruit.1 = apple
>> fruit.2 = lemon
>> end

配列のインデックスを順に取得し繰り返し処理が行われています。

-- --

JavaScript で繰り返し処理を行う方法のひとつである for...in 文の使い方について解説しました。

著者 / TATSUO IKURA

プログラミングや開発環境構築の解説サイトを運営しています。