【JavaScript】for-in文 / 連想配列 - 繰り返し処理（連想配列の繰り返し）

JavaScriptのfor-in文をご紹介します。

for-in文

for-in文は連想配列から値を１つずつ取り出す繰り返し処理です。
for文でも同様の処理を実現できますが、連想配列の値の数だけ繰り返したい場合は、for-in文が適しています。

基本構文

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

処理順序

for-of文の処理の順序は次のようになります。

連想配列からキーを取り出す（キーがない場合は４へ）
ブロック処理
１へ
終了

サンプル

Sample

let data = { a: "aaa", b: "bbb", c: "ccc" };

for( const key in data ) {
    console.log(key, data[key]);
}

Console

a aaa
b bbb
c ccc

for-in文の繰り返しごとに、変数dataの先頭からキーを１つ取り出して処理を行ないます。

for文とfor-in文の違い

for-in文で実現できることは、for文でも実現できます。
ただし、連想配列から値を取り出す繰り返し処理はfor-in文の方がコードの簡潔性とバグ要因を抑えられる点で優れています。

次のサンプルコードで比較して見てみましょう。

for文

for

let fruits = {
    "Apple"  : "りんご",
    'Orange' : "みかん",
    'Grape'  : "ぶどう",
    'Melon'  : "めろん"
};

const keys = Object.keys(fruits);
for( let i = 0; i < keys.length; i++ ) {
    console.log(fruits[keys[i]]);
}

Console

りんご
みかん
ぶどう
めろん

for-of文

for-of

let fruits = {
    "Apple"  : "りんご",
    'Orange' : "みかん",
    'Grape'  : "ぶどう",
    'Melon'  : "めろん"
};

for( const key in fruits ) {
    console.log(fruits[key]);
}

Console

りんご
みかん
ぶどう
めろん

いずれも同じ処理を目的としたコードですが、for文の繰り返し制御よりもfor-in文の方が簡潔です。