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] セクションでノードのオフセット位置を計算しており、statementblockを使う必要はありません。代わりに 空文 を使っています。

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;"
注記: これは、セミコロンが必須であるJavaScriptの数少ないケースの1つです。 セミコロンがないと、サイクル宣言に続く行は文と見なされます。

仕様

仕様書
ECMAScript (ECMA-262)
for statement の定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイルサーバー
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung InternetNode.js
forChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 3Opera 完全対応 3Safari 完全対応 1WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0nodejs 完全対応 0.1.100

凡例

完全対応  
完全対応

関連情報