【JavaScript】for...in / for...of とは（備忘録）

１．for…in とは

・for...inは、指定したオブジェクトから要素（プロパティ）を順不同に取得できます。
・基本的に取得できるのは、オブジェクトのプロパティ名（キー）です。
・値を取得したい場合は、オブジェクト名とプロパティ名を使用します。

for...inの書き方の例

for (const 定数名 in オブジェクト名) {
    // 処理内容
}

重要：
・ループ処理中に変数に再代入しない限り、const を使用して定数宣言ができます。
　各ループ処理ごとに、別々の変数と認識されるのが理由です。
　変数に値を再代入する場合、let を使用してください。
・定数（変数）名は、オブジェクトのプロパティ名（キー）を指します。

２．for...of とは

・for...of は、配列や文字列などから順番に値を取得できます。

for...ofの書き方の例

for (const 定数名 of 配列名) {
    // 処理内容
}

３．サンプルプログラム

〇例１：for...in のサンプルプログラム

Sample_1.js

const employee_info = {
    name: '山田',
    gender: '男',
    age: '30',
    occupation: '技術職',
    work_place: '東京都'    
}

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

実行結果

name: 山田
gender: 男
age: 30
occupation: 技術職
work_place: 東京都

重要：
オブジェクトから値を取得したい場合、オブジェクト名[変数名] と記述します。

〇例２：for...of のサンプルプログラム

• その１

Sample_2.js

const fruit_list = ['リンゴ', 'ブドウ', 'パイナップル'];

const str = '美味しい';

// 配列から値を順番に取り出す
for (const element of fruit_list) {
    console.log(element);
}

// 文字列から値を順番に取り出す
for (const char of str) {
    console.log(char);
}

実行結果

リンゴ
ブドウ
パイナップル
美
味
し
い

• その２

Sample_3.js

const number = [10, 15, 20];

for (let value of number) {
    value += 5;
    console.log(value);
}

実行結果

15
20
25

重要：
for...ofの変数部分には、const や let/var を使用した有効な変数宣言が必要です。
代入式などを置くことはできません。

• その３

Sample_4.js

const number = [0, 10, 20, 30, 40, 50];
const target = 30;

for (let value of number) {
    if (value === target) {
        console.log(`${value} が存在しました`);
        console.log('処理を終了します');
        // 条件を満たしたらループを終了
        break;
    }
}

実行結果

30 が存在しました
処理を終了します

解説：
配列 number の各要素を順にチェックし、定数 target と一致する要素を見つけた場合、その要素を出力しループを終了します。

４．参考

・for...of
・for...in
・for...inとfor...ofの違い

５．その他

・実行環境