JavaScript | 基礎構文:ループ – for…in

JavaScript JavaScript
スポンサーリンク

for…in 文とは何か

for...in 文は、オブジェクトのプロパティ名(キー)を順番に取り出すためのループ構文です。配列や文字列にも使えますが、基本的には「オブジェクトの中身を調べる」場面でよく使われます。


基本構文と流れ

構文は次のようになります。

for (let key in オブジェクト) {
  // key にプロパティ名が入る
  // オブジェクト[key] で値を取り出せる
}
JavaScript
  • key にはオブジェクトのプロパティ名が順番に代入されます。
  • オブジェクト[key] と書くことで、そのキーに対応する値を取り出せます。

例題で理解する

例題1:オブジェクトのプロパティを列挙

const user = {
  name: "Taro",
  age: 20,
  role: "member"
};

for (let key in user) {
  console.log(key, ":", user[key]);
}
JavaScript

結果は以下のようになります。

name : Taro
age : 20
role : member

例題2:配列に対して使う場合

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

for (let index in fruits) {
  console.log(index, ":", fruits[index]);
}
JavaScript

結果は以下のようになります。

0 : apple
1 : banana
2 : orange

ただし、配列には for...of の方が適しているため、for...in はオブジェクト向けと覚えると混乱しません。


例題3:ネストしたオブジェクトを処理

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

for (let subject in scores) {
  console.log(`${subject} の点数は ${scores[subject]} 点です`);
}
JavaScript

結果は以下のようになります。

math の点数は 90 点です
english の点数は 80 点です
science の点数は 70 点です

注意点とコツ

配列には for...of を使う方が良い

for...in はインデックス番号を文字列として返すため、配列の要素を扱うには少し不自然です。配列の値を直接取り出したいなら for...of を使いましょう。

オブジェクトのプロパティを列挙するのに便利

ユーザー情報や設定値など、オブジェクトのキーと値を順番に処理したいときに最適です。

プロトタイプのプロパティも列挙される場合がある

for...in はオブジェクトが継承しているプロパティも拾うことがあります。必要なら hasOwnProperty を使って「自分自身のプロパティだけ」を判定しましょう。

for (let key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(key, obj[key]);
  }
}
JavaScript

まとめ

  • for...in は「オブジェクトのキーを順番に取り出す」ためのループ。
  • オブジェクト[key] で値を取得できる。
  • 配列にも使えるが、基本はオブジェクト向け。
  • プロトタイプのプロパティも列挙されるので注意が必要。

初心者は「for…in はオブジェクトの中身を調べるためのループ」と覚えると理解しやすいです。

タイトルとURLをコピーしました