---
title: for
slug: Web/JavaScript/Reference/Statements/for
tags:
  - Anweisung
  - JavaScript
  - Loop
  - for
translation_of: Web/JavaScript/Reference/Statements/for
---
<div>{{jsSidebar("Anweisungen")}}</div>

<p>Die <strong>for Anweisung</strong> beschreibt eine Schleife mit drei optionalen Ausdrücken und einer oder mehreren Anweisungen.</p>

<h2 id="Syntax">Syntax</h2>

<pre class="syntaxbox">for ([<em>initialization</em>]; [<em>condition</em>]; [<em>final-expression</em>])
   <em>statement</em>
</pre>

<dl>
 <dt><code>initialization</code></dt>
 <dd>Ein Ausdruck (inklusive Zuweisungen) oder eine Variablendeklaration. Normalerweise wird ein Schleifenzähler initialisiert. Neu deklarierte Variablen haben denselben Geltungsbereich wie die <code>for</code> Schleife (d.h. sie sind nicht lokal auf die Schleife begrenzt). Die Initialisierung ist optional.</dd>
 <dt><code>condition</code></dt>
 <dd>Die Bedingung wird <strong>vor</strong> jedem Schleifendurchlauf ausgewertet. Ergibt die Auswertung <em><strong>true</strong></em>, dann wird die Answeisung (<code>statement</code>) ausgeführt. Die Bedingung ist optional. Bei fehlender Bedingung gilt immer <em><strong>true</strong></em>. Bei <strong><em>false</em></strong> wird die Schleife verlassen (und bei der nächsten Anweisung, die dem Schleifenende folgt, weitergemacht).</dd>
 <dt><code>final-expression</code></dt>
 <dd>Dieser Ausdruck wird <strong>nach </strong>jedem Schleifendurchlauf ausgewertet. Dies findet vor der nächsten Auswertung der Schleifenbedinung statt. Üblicherweise wird der Schleifenzähler inkrementiert oder dekrementiert.</dd>
 <dt><code>statement</code></dt>
 <dd>Der Ausdruck wird ausgeführt solange die Bedingung erfüllt ist (<em><strong>true</strong></em>). Man kann mehrere Anweisungen ausführen, indem man sie in einer <a href="/en-US/docs/JavaScript/Reference/Statements/block" title="JavaScript/Reference/Statements/block">block</a> Anweisung  (<code style="font-style: normal;">{ ... }</code>) zusammenfasst. Eine leere Anweisung (<a href="/en-US/docs/Web/JavaScript/Reference/Statements/Empty">empty</a> statement), markiert durch semikolon, kann auch ausgeführt werden.</dd>
</dl>

<h2 id="Beispiele">Beispiele</h2>

<h3 id="Verwendung_der_for_Schleife">Verwendung der <code>for</code> Schleife</h3>

<p>Die folgende for Anweisung initialisiert die Variable <code>i</code> mit null. Die Bedingung prüft ob <code>i</code> kleiner neun ist, führt den Code in der <a href="/en-US/docs/JavaScript/Reference/Statements/block" title="JavaScript/Reference/Statements/block">block</a> Anweisung aus und erhöht <code>i</code> um eins nach jedem Schleifendurchlauf.</p>

<pre class="brush: js">for (var i = 0; i &lt; 9; i++) {
   console.log(i);
   // more statements
}
</pre>

<h3 id="Optionale_for_Ausdrücke">Optionale <code>for</code> Ausdrücke</h3>

<p>Alle drei <code>for</code> Ausdrücke sind optional.</p>

<p>Z.B. kann der Initialisierungsblock leer sein:</p>

<pre class="brush: js">var i = 0;
for (; i &lt; 9; i++) {
    console.log(i);
    // more statements
}
</pre>

<p>Die Schleifenbedinung ist auch optional. Man muss jedoch darauf achten, dass in der Schleife eine Austrittsbedingung (<a href="/de/docs/Web/JavaScript/Reference/Statements/break">break</a> Anweisung) vorkommt, um nicht in eine Endlosschleife zu geraten.</p>

<pre class="brush: js">for (var i = 0;; i++) {
   console.log(i);
   if (i &gt; 3) break;
   // more statements
}</pre>

<p>Das gleiche gilt selbstverständlich wenn man alle drei Blöcke leer lässt. Hier wird <code>i</code> in der Schleife inkrementiert, um sicherzustellen, dass nach endlich vielen Durchläufen die Schleife abgebrochen wird.</p>

<pre class="brush: js">var i = 0;

for (;;) {
  if (i &gt; 3) break;
  console.log(i);
  i++;
}
</pre>

<h3 id="Verwendung_von_for_Schleife_mit_leerer_Anweisung">Verwendung von <code>for</code> Schleife mit leerer Anweisung</h3>

<p>Das folgende Beispiel zeigt eine leere Anweisung im Schleifenkörper. Die Berechnungen finden im Ausdruck <em>[final-expression] </em>statt. Die Schleife wird solange durchlaufen bis die Bedingung nicht mehr erfüllt ist.</p>

<pre class="brush: js">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;"</pre>

<div class="note"><strong>Beachte:</strong> Die leere Anweisung folgt der Schleife und besteht lediglich aus einem Semikolon.</div>

<h2 id="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Bemerkung</th>
  </tr>
  <tr>
   <td>{{SpecName('ES1', '#sec-12.6.2', 'for statement')}}</td>
   <td>{{Spec2('ES1')}}</td>
   <td>Ursprüngliche Definition.</td>
  </tr>
  <tr>
   <td>{{SpecName('ES3', '#sec-12.6.3', 'for statement')}}</td>
   <td>{{Spec2('ES3')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('ES5.1', '#sec-12.6.3', 'for statement')}}</td>
   <td>{{Spec2('ES5.1')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-for-statement', 'for statement')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-for-statement', 'for statement')}}</td>
   <td>{{Spec2('ESDraft')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Browserkompatibilität">Browserkompatibilität</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Unterstützung</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Chrome for Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Unterstützung</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <li>{{jsxref("Statements/break", "break")}}</li>
 <li>{{jsxref("Statements/continue", "continue")}}</li>
 <li>{{jsxref("Statements/empty", "empty")}}</li>
 <li>{{jsxref("Statements/while", "while")}}</li>
 <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/do...while"><code>do...while</code></a></li>
 <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in"><code>for...in</code></a></li>
 <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of"><code>for...of</code></a></code></li>
</ul>