for

for 文はループを作ります。丸括弧で囲まれセミコロンで分けられた、3 つの省略可能な式と、その後にループ内で実行される文（通常はブロック文）が構成されます。

構文

for ([initialization]; [condition]; [final-expression]) statement

initialization

(代入式を含む) 式または変数宣言。たいていは、カウンタ変数を初期化するために使われます。この式では、var キーワードを用いて新しい変数を任意で宣言してもかまいません。これらの変数はループにローカルなものではありません。すなわち、これらは for ループが属するスコープと同じスコープ内にあります。この式の結果は捨て去られます。

condition

ループの各反復の前に評価される式。もしこの式が true に評価されるなら、statement が実行されます。この条件テストは省略可能です。もし省略されたなら、条件は常に true に評価されます。もしこの式が false に評価されるなら、実行は for の構成子に続く最初の式に飛びます。

final-expression

ループの各反復の終わりに評価される式。これは、condition の次の評価の前に発生します。一般的には、カウンタ変数を更新または増加するために使われます。

statement

条件が true に評価される限り実行される文。ループ内で複数の文を実行するには、それらの文をグループ化するためにブロック文 ({ ... }) を使ってください。ループ内で実行する文をなくすには、空文  (;) を使います。

例

例: for を使う

次の for 文は、変数 i を宣言し、それを 0 に初期化することから始まります。i が 9 より小さいことをチェックし、続く 2 つの文を実行し、ループを通過した後ごとに i を 1 増加します。

for (let i = 0; i < 9; i++) {
   console.log(i);
   // その他の文
}

省略可能な for の式

for ループの先頭にある 3 つの式は、省略可能です。

例えば、initialization ブロックで変数を初期化する必要はありません:

var i = 0;
for (; i < 9; i++) {
    console.log(i);
    // その他の文
}

initialization ブロックと同様に、condition ブロックも省略可能です。この式を省略すると、無限ループを作成しないようにするため、break 文を置くようにしなければなりません。

for (let i = 0;; i++) {
   console.log(i);
   if (i > 3) break;
   // その他の文
}

3 つのブロックをすべて省略することもできます。繰り返しますが、ループを終了するための break 文や変数を変更 (増加) する処理を使うようにしてください。その結果、ある時点で break 文の条件が true になります。

var i = 0;

for (;;) {
  if (i > 3) break;
  console.log(i);
  i++;
}

空文を伴う for を使う

以下の for ループは [final-expression] セクションでノードのオフセット位置を計算しており、statement や block 文を使う必要はありません。代わりに 空文 を使っています。

function showOffsetPos(sId) {

  var nLeft = 0, nTop = 0;

  for (

    var oItNode = document.getElementById(sId); /* initialization */

    oItNode; /* condition */

    nLeft += oItNode.offsetLeft, nTop += oItNode.offsetTop, oItNode = oItNode.offsetParent /* final-expression */

  ); /* semicolon */ 

  console.log('Offset position of \'' + sId + '\' element:\n left: ' + nLeft + 'px;\n top: ' + nTop + 'px;');

}

/* Example call: */

showOffsetPos('content');

// Output:
// "Offset position of "content" element:
// left: 0px;
// top: 153px;"

仕様

ブラウザーの互換性

関連情報

• empty statement
• break
• continue
• while
• do...while
• for...in
• for...of