JavaScript | for…in と for…of の違い

JavaScript の for…in と for…of は見た目が似ていますが、取り出すものがまったく違います。初心者向けに整理するとこうなります。

違いのまとめ

for…in の例（キーを取り出す）

const fruitPrices = { orange: 170, apple: 90, lemon: 110 };

for (let key in fruitPrices) {
  console.log(key, fruitPrices[key]);
}
// 出力:
// orange 170
// apple 90
// lemon 110

const fruitPrices = { orange: 170, apple: 90, lemon: 110 };

for (let key in fruitPrices) {
  console.log(key, fruitPrices[key]);
}
// 出力:
// orange 170
// apple 90
// lemon 110

• key には プロパティ名（orange, apple, lemon）が入る
• 値を取り出すには fruitPrices[key] と書く必要がある

for…of の例（値を取り出す）

const fruits = ["orange", "apple", "lemon"];

for (let value of fruits) {
  console.log(value);
}
// 出力:
// orange
// apple
// lemon

const fruits = ["orange", "apple", "lemon"];

for (let value of fruits) {
  console.log(value);
}
// 出力:
// orange
// apple
// lemon

• value には 配列の要素そのものが入る
• インデックス番号は取れない（必要なら通常の for や forEach を使う）

使い分けのコツ

• オブジェクトのプロパティを回したい → for...in
• 配列や文字列の値を順番に処理したい → for...of

ちょっとした練習問題

1. オブジェクト { math: 80, english: 70 } の科目名と点数を表示するにはどちらを使う？
2. 配列 ["dog", "cat", "bird"] の要素を順番に表示するにはどちらを使う？

解答と解答

問題1

オブジェクト { math: 80, english: 70 } の科目名と点数を表示するにはどちらを使う？

解説

• オブジェクトは「キー（プロパティ名）」を順番に取り出したい
• だから for…in を使う

const scores = { math: 80, english: 70 };

for (let subject in scores) {
  console.log(`${subject}: ${scores[subject]}`);
}
// 出力:
// math: 80
// english: 70

const scores = { math: 80, english: 70 };

for (let subject in scores) {
  console.log(`${subject}: ${scores[subject]}`);
}
// 出力:
// math: 80
// english: 70

問題2

配列 ["dog", "cat", "bird"] の要素を順番に表示するにはどちらを使う？

解説

• 配列は「値」をそのまま順番に取り出したい
• だから for…of を使う

const animals = ["dog", "cat", "bird"];

for (let animal of animals) {
  console.log(animal);
}
// 出力:
// dog
// cat
// bird

const animals = ["dog", "cat", "bird"];

for (let animal of animals) {
  console.log(animal);
}
// 出力:
// dog
// cat
// bird

まとめ

• for…in → オブジェクトのキーや配列のインデックスを取り出す
• for…of → 配列や文字列などの「値」を取り出す

ここまでで「キーを回すのが for…in」「値を回すのが for…of」という違いがはっきりしたと思います。