for…in 文とは何か
for...in 文は、オブジェクトのプロパティ名(キー)を順番に取り出すためのループ構文です。配列や文字列にも使えますが、基本的には「オブジェクトの中身を調べる」場面でよく使われます。
基本構文と流れ
構文は次のようになります。
for (let key in オブジェクト) {
// key にプロパティ名が入る
// オブジェクト[key] で値を取り出せる
}
JavaScriptkeyにはオブジェクトのプロパティ名が順番に代入されます。オブジェクト[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 はオブジェクトの中身を調べるためのループ」と覚えると理解しやすいです。
