いい加減「for…in」と「for…of」の違いを覚えたい話

Posted on by つちえ

タイトルの通りですが、いつも「for…in」と「for…of」の違いを覚えられないので、違いについて書きためてみようと思います。

「for…in」と「for…of」の違い

「for…in」のinはindexのinと覚えましょう。

const prefList = [
    {
        pref_code: '13',
        pref_name: '東京都'
    },{
        pref_code: '27',
        pref_name: '大阪府'
    }
];

for (let index in prefList) {
     let pref = prefList[index];
    /**
     * 13: 東京都
     * 27: 大阪府
     */
console.log(`${pref.pref_code}: ${pref.pref_name}`);

「for…in」がindexを取得するのに対して、「for…of」は値を取得します。

for (let pref of prefList) {
    console.log(`${pref.pref_code}: ${pref.pref_name}`);
}

※ 出力結果は「for…in」の場合と同じです。

おまけ

ちなみに「for…in」はIEでも動きますが、「for…of」はIEで動きません。

inのiはIEのIとも覚えましょう。

以上。