【JavaScript】for-in文 - 反復処理 / 連想配列からキーを１つずつ取り出す繰り返し処理

JavaScriptのfor-in文について解説します。

for-in文

for-in文は“連想配列のキーを１つずつ取り出す反復処理”です。

for文で同様の処理を実現できますが、連想配列のサイズだけ繰り返す場合はfor-in文が適しています。

基本構文

for( const 変数 in 連想配列 ) {
    // 処理...
}

変数、連想配列の部分は処理に応じて記述します。

処理の流れ

for-in文の処理の流れをサンプルコードと合わせて以下に示します。

1.継続・終了の判定

配列から取得可能なキーが存在するか判定します。

『取得可能な値』は前回の繰り返しで取得したキーの次のキーで、初回は先頭のキーです。

2.キーの取り出し

配列から前回の繰り返しで取得したキーの次のキーを１つ取り出し、変数に記憶します。

let prices = { "Apple": 150, "Orange": 100, "Melon": 2300 };

for( const key in prices ) {
    // 処理...
}

サンプルコードでは連想配列pricesから値を取り出し、変数keyに記憶します。

3.処理

処理（ブロック{}内）を実行します。

let prices = { "Apple": 150, "Orange": 100, "Melon": 2300 };

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

サンプルコードではconsole.log(key + " : " + prices[key])の部分です。

4.繰り返し

『1.継続・終了の判定』に戻ります。

以上がfor-in文の処理の流れです。

ここまでのサンプルコードを実行すると次の結果になります。

Apple : 150
Orange : 100
Melon : 2300

処理の流れ（具体例）

上記サンプルコードの具体的な処理の流れを以下に示します。

サンプル

let numbers = { "Dog": 10, "Cat": 30, "Fish": 500 };

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

Dog : 10
Cat : 30
Fish : 500

for文とfor-in文の違い

for-in文で実現可能な処理はfor文でも実現できます。

ただし、連想配列からキーを１つずつ取り出して繰り返す処理はfor-in文の方が適しています。

例えば上記サンプルをfor文で書き換えると次のようになります。

let numbers = { "Dog": 10, "Cat": 30, "Fish": 500 };

const keys = Object.keys(numbers);

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

Dog : 10
Cat : 30
Fish : 500

コード量が増加し、for-in文より複雑になりました。

for文で実現するには、事前にObject.keysによってキーを配列として準備する必要があります。

その後、反復回数を条件式(i < keys.length)で制御し、keys[i]でキーを取り出しつつ、numbers[keys[i]]で連想配列から値を取り出します。

このように制御する処理が増えることは不具合が発生してしまう要因になります。

for文、for-in文の動作を理解し、適切に使い分けましょう。