【JavaScript】for-inとfor-ofの違いと使い分け

// < for-in-文 >

// for-in-文は、指定された連想配列(Object)から「key」を取り出して処理をする！

const robotamaInstance = {
    value: 'ロボ玉試作1号機',
    group_name: 'ロボ玉組',
    from: 'グンマー帝国',
    like: 'ひまたね',
    age: 1,
    robotama_flag: true,
};


// 1. Object に対して「for-in-文」を使用する！
for (const key in robotamaInstance) {
    console.log({key});
}
// < 出力結果 >
    // {key: 'value'}
    // {key: 'group_name'}
    // {key: 'from'}
    // {key: 'like'}
    // {key: 'age'}
    // {key: 'robotama_flag'}


// 2. Object の value を1つずつ取り出して処理をしたい場合
for (const key in robotamaInstance) {
    const val = robotamaInstance[key];
    console.log({val});
}
// < 出力結果 >
    // {val: 'ロボ玉試作1号機'}
    // {val: 'ロボ玉組'}
    // {val: 'グンマー帝国'}
    // {val: 'ひまたね'}
    // {val: 1}
    // {val: true}


const devRobotama = ['ロボ玉', 'ロボ玉試作1号機', 'ロボ玉試作2号機', 'ロボ玉試作3号機'];

// 3. Array に対して「for-in」を使用する！
for (const key in devRobotama) {
    console.log({key});
}
// < 出力結果 >
    // {key: '0'}
    // {key: '1'}
    // {key: '2'}
    // {key: '3'}

// < for-of-文 >

// for-of-文は、指定された列挙可能なオブジェクト(Array, Map など)から
// 「value」を(先頭から)順に取り出して処理をする！

const devRobotama2 = ['ロボ玉', 'ロボ玉試作1号機', 'ロボ玉試作2号機', 'ロボ玉試作3号機'];

// 1. Array に対して「for-of」を使用する！
for (const val of devRobotama2) {
    console.log({val});
}
// < 出力結果 >
    // {val: 'ロボ玉'}
    // {val: 'ロボ玉試作1号機'}
    // {val: 'ロボ玉試作2号機'}
    // {val: 'ロボ玉試作3号機'}


const robotamaInstance2 = {
    value: 'ロボ玉試作1号機',
    group_name: 'ロボ玉組',
    from: 'グンマー帝国',
    like: 'ひまたね',
    age: 1,
    robotama_flag: true,
};


// 単体である Object に対して通常「for-of-文」は使えない！

// 2. Objectに対して、「for-of文」を使いたい場合は、、、
// Object-Method を使って「Array」(列挙可能なObject)に変換する！

for (const val of Object.values(robotamaInstance2)) {
    console.log({val});
}
// < 出力結果 >
    // {val: 'ロボ玉試作1号機'}
    // {val: 'ロボ玉組'}
    // {val: 'グンマー帝国'}
    // {val: 'ひまたね'}
    // {val: 1}
    // {val: true}

// < Object の操作をする Object-Method たち >

const robotamaInstance3 = {
    value: 'ロボ玉試作1号機',
    group_name: 'ロボ玉組',
    from: 'グンマー帝国',
    like: 'ひまたね',
    age: 1,
    robotama_flag: true,
};

// 1. Object.keys()は、key-Array を作成できる！
const ObjectKeys = Object.keys(robotamaInstance3);

console.log({ObjectKeys});
// ObjectKeys: (6) ['value', 'group_name', 'from', 'like', 'age', 'robotama_flag']


// 2. Object.values()は、value-Array を作成できる！
const ObjectValues = Object.values(robotamaInstance3);

console.log({ObjectValues});
// ObjectValues: (6) ['ロボ玉試作1号機', 'ロボ玉組', 'グンマー帝国', 'ひまたね', 1, true]


// 3. Object.entries()は、key-value-Array を作成できる！
const ObjectKeyValues = Object.entries(robotamaInstance3);

console.log({ObjectKeyValues});
// < 出力結果 >
// ObjectKeyValues: Array(6)
    // 0: (2) ['value', 'ロボ玉試作1号機']
    // 1: (2) ['group_name', 'ロボ玉組']
    // 2: (2) ['from', 'グンマー帝国']
    // 3: (2) ['like', 'ひまたね']
    // 4: (2) ['age', 1]
    // 5: (2) ['robotama_flag', true]
    // length: 6