JavaScriptでループ処理をするとき、よく出てくるfor...inとfor...of。
使い方が似ているようで、実は役割が違うんです！

この記事では、「それぞれの特徴」と「実際の使い方」について、初心者にもわかりやすくまとめます！

構文	取り出すもの	使う場面	配列への適正
for...in	キー（インデックス番号やプロパティ名）	オブジェクトのプロパティを回すとき	あまり適していない
for...of	値（中身そのもの）	配列や文字列を順番に回すとき	適している

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"）が入ります。

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

for (let fruit of fruits) {
  console.log(fruit);
}

出力：

apple
banana
orange

💡fruit には配列の要素そのもの（"apple"など）が順番に入ります。

実は、配列にも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を用いるとグット！

正しいループの使い分けができると、コードもきれいでバグが減ります✨
これからどんどん実践して、使いこなしていきましょう！