for

for 文は丸括弧で囲まれ、セミコロンにより分けられた、3 つの省略可能な式で構成されるループを作成します。式の後にはループの中で実行される文が続きます。

構文

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

initialization

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

condition

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

final-expression

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

statement

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

例

例: for を使う

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

for (var i = 0; i < 9; i++) {
   console.log(i);
   // more statements
}

省略可能な for の式

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

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

var i = 0;
for (; i < 9; i++) {
    console.log(i);
    // more statements
}

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

for (var i = 0;; i++) {
   console.log(i);
   if (i > 3) break;
   // more statements
}

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

var i = 0;

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

empty 文を伴う for を使用する

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

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
       /* empty statement */ ;
  
  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;"

仕様

ブラウザ実装状況

参照

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