JavaScript の for ループを例で解説

概要: このチュートリアルでは、JavaScript の for ループステートメントを使用して、さまざまなオプションでループを作成する方法を学びます。

JavaScript の for ループステートメントの概要

for ループステートメントは、3 つのオプション式を使用してループを作成します。以下は、for ループステートメントの構文を示しています。

for (initializer; condition; iterator) {
    // statements
}Code language: JavaScript (javascript)

for ステートメントは、ループが開始されるときにのみ initializer を一度だけ実行します。通常、初期化式でローカルループ変数を宣言および初期化します。

condition は、for が次の反復を実行するかどうかを決定するブール式です。

for ステートメントは、各反復の前に condition を評価します。条件が true の場合（または存在しない場合）、次の反復を実行します。それ以外の場合は、ループを終了します。

for ステートメントは、各反復後に iterator を実行します。

以下のフローチャートは、for ループを示しています。

for ループでは、3 つの式はオプションです。以下は、式のない for ループを示しています。

for ( ; ; ) {
   // statements
}Code language: JavaScript (javascript)

for ループステートメントの使用例をいくつか見てみましょう。

次の例では、for ループステートメントを使用して、1 から 4 までの数値をコンソールに表示します。

for (let i = 1; i < 5; i++) {
  console.log(i);
}
Code language: JavaScript (javascript)

出力

動作の説明。

次の例では、初期化式がない for ループを使用しています。

let j = 1;
for (; j < 10; j += 2) {
  console.log(j);
}
Code language: JavaScript (javascript)

出力

initializer 式と同様に、condition 式はオプションです。condition 式を省略する場合は、ループを終了するために break ステートメントを使用する必要があります。

for (let j = 1; ; j += 2) {
  console.log(j);
  if (j > 10) {
    break;
  }
}
Code language: JavaScript (javascript)

出力

for ループステートメントの 3 つの式はすべてオプションです。したがって、すべてを省略できます。例:

let j = 1;
for (;;) {
  if (j > 10) {
    break;
  }
  console.log(j);
  j += 2;
}
Code language: JavaScript (javascript)

出力

JavaScript では、for ステートメントに空のステートメントを含めることができます。この場合、for ステートメントの直後にセミコロン（;）を置きます。

たとえば、次は for ループを使用して 1 から 10 までの 10 個の数の合計を計算します。

let sum = 0;
for (let i = 0; i <= 9; i++, sum += i);
console.log(sum);Code language: JavaScript (javascript)

出力

このチュートリアルは役に立ちましたか？