JavaScript | 「for」「while」「for-of」「forEach」の違い

JavaScriptで繰り返し処理を書くときに「for」「while」「for-of」「forEach」がよく登場します。それぞれの特徴と使い分けを、初心者向けに整理してみましょう。

for文

• 特徴: 回数が決まっている繰り返し、インデックスを使いたいとき。
• 書き方:

for (let i = 0; i < 5; i++) {
  console.log(i);
}

for (let i = 0; i < 5; i++) {
  console.log(i);
}

• ポイント:
  • 初期化・条件・更新をまとめて書ける。
  • breakやcontinueで制御できる。
  • 配列の添字を使う処理に便利。

while文

• 特徴: 条件がtrueの間、ずっと繰り返す。
• 書き方:

let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

• ポイント:
  • 「いつ終わるか分からない」繰り返しに向いている。
  • 条件を満たさなくなったら終了。
  • 無限ループになりやすいので注意。

for-of文

• 特徴: 配列や文字列など「要素を順番に取り出す」ためのループ。
• 書き方:

const fruits = ["apple", "banana", "orange"];
for (const fruit of fruits) {
  console.log(fruit);
}

const fruits = ["apple", "banana", "orange"];
for (const fruit of fruits) {
  console.log(fruit);
}

• ポイント:
  • 配列の中身を1つずつ取り出すのに便利。
  • インデックス（位置番号）は使わない。
  • 配列だけでなく文字列やMap/Setにも使える。

forEachメソッド

• 特徴: 配列専用のメソッド。コールバック関数を使って要素ごとに処理する。
• 書き方:

const fruits = ["apple", "banana", "orange"];
fruits.forEach((fruit, index) => {
  console.log(index, fruit);
});

const fruits = ["apple", "banana", "orange"];
fruits.forEach((fruit, index) => {
  console.log(index, fruit);
});

• ポイント:
  • 配列にしか使えない。
  • インデックスや配列全体も引数で受け取れる。
  • returnで途中終了できない（全部回る）。

違いをまとめる表

使い分けのコツ

• 回数が決まっている → for
• 条件次第でいつ終わるか分からない → while
• 配列や文字列の中身を順番に処理 → for-of
• 配列を「関数的に」処理したい → forEach

👉 もし「実際の開発ではどれをよく使うの？」という観点も気になるなら、現場での使い分け例も紹介できますよ。知りたいですか？