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] セクションでノードのオフセット位置を計算しており、statementblockを使用する必要はありません。代わりに 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;"
注記: この例では statement セクションを使用しないとき、セミコロンをループの宣言の直後に置きます

仕様

仕様書 策定状況 コメント
ECMAScript 2017 Draft (ECMA-262)
for statement の定義
ドラフト  
ECMAScript 2015 (6th Edition, ECMA-262)
for statement の定義
標準  
ECMAScript 5.1 (ECMA-262)
for statement の定義
標準  
ECMAScript 3rd Edition (ECMA-262)
for statement の定義
標準  
ECMAScript 1st Edition (ECMA-262)
for statement の定義
標準 最初期の定義

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート (有) (有) (有) (有) (有)
機能 Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート (有) (有) (有) (有) (有) (有)

参照

ドキュメントのタグと貢献者

 このページの貢献者: yyss, teoli, ethertank, Potappo, Nanto vi, Mgjbot
 最終更新者: yyss,