JavaScriptでループ処理をするとき、よく出てくるfor...inとfor...of。
使い方が似ているようで、実は役割が違うんです！
この記事では、「それぞれの特徴」と「実際の使い方」について、初心者にもわかりやすくまとめます！
✅️for...in と for...of の違い
| 構文 | 取り出すもの | 使う場面 | 配列への適正 |
|---|---|---|---|
| for...in | キー（インデックス番号やプロパティ名） | オブジェクトのプロパティを回すとき | あまり適していない |
| for...of | 値（中身そのもの） | 配列や文字列を順番に回すとき | 適している |
✅️それぞれの使い方
for...in の例（オブジェクト向き）
const user = {
name: "Yuki",
age: 28,
city: "Osaka"
};
for (let key in user) {
console.log(`${key}: ${user[key]}`);
}
出力：
name: Yuki
age: 28
city: Osaka
💡key にはオブジェクトのプロパティ名（"name", "age", "city"）が入ります。
for...of の例（配列向き）
const fruits = ["apple", "banana", "orange"];
for (let fruit of fruits) {
console.log(fruit);
}
出力：
apple
banana
orange
💡fruit には配列の要素そのもの（"apple"など）が順番に入ります。
✅️配列を回すときは for...of がオススメ！
実は、配列にもfor...inは使えます。 例えばこんなふうに書けば動きます。
const fruits = ["apple", "banana", "orange"];
for (let index in fruits) {
console.log(fruits[index]);
}
ただし、for...inはもともとオブジェクト向けなので、
配列にはfor...ofを使うのが自然で安全です！
理由は、
- 配列の順番を保証してくれる
- 余計なプロパティを拾わない
- コードが読みやすい
など、たくさんあります！
✒️実務ではどうなの？
現場は、こういった配列を反復処理するときは基本的に
for...of
forEach
map
のどれかを使うことが多いです！
間違った使い方をするとバグにつながりやすいので、
用途に合った書き方を選ぶ ことがすごく大切です！
✅️まとめ
for...inはオブジェクトを回すときに使う。
for...ofは配列や文字列を回すときに使う。
配列にはfor...ofを選ぶのがベスト！
他にも適宜forEach,mapを用いるとグット！
正しいループの使い分けができると、コードもきれいでバグが減ります✨
これからどんどん実践して、使いこなしていきましょう！