for-Schleifen in

Über for-Schleifen

Allgemeine Syntax

Die for-Schleife ist eine der am häufigsten verwendeten Anweisungen, um Logik wiederholt auszuführen. In JavaScript besteht sie aus dem Schlüsselwort for, einem Header in runden Klammern und einem in geschweifte Klammern gesetzten Block, dem Schleifenblock.

for (initialization; condition; step) {
  // code that is executed repeatedly as long as the condition is
  // true
}

Header

Die Initialisierung richtet normalerweise eine Zählvariable ein, die Bedingung prüft, ob die Schleife fortgesetzt oder beendet werden soll, und der Schritt erhöht den Zähler am Ende jeder Wiederholung. Die einzelnen Teile des Headers werden durch Semikolons getrennt.

const list = ['a', 'b', 'c'];
for (let i = 0; i < list.length; i++) {
  // code that should be executed for each item in the array
}

Alle drei Teile des Headers sind optional. In der Praxis wird das selten genutzt. Mehr dazu kannst du in der MDN-Dokumentation lesen.

Verschachtelte for-Schleifen

for-Schleifen können verschachtelt werden, zum Beispiel um über verschachtelte (mehrdimensionale) Arrays zu iterieren. Achte darauf, für jede Schleife eine andere Zählvariable anzulegen.

const coords = [
  [1, 2],
  [4, 7],
  [10, -3],
];

for (let i = 0; i < coords.length; i++) {
  for (let j = 0; j < coords[i].length; j++) {
    // do something with coords[i][j]
  }
}

Break, Continue und Labels

Innerhalb eines Schleifenblocks kannst du das Schlüsselwort break verwenden, um die Ausführung der Schleife vollständig zu beenden. Das Schlüsselwort continue hingegen beendet nur die Ausführung der aktuellen Iteration und fährt mit der nächsten fort.

Bei verschachtelten Schleifen wirken break und continue standardmäßig immer auf die innerste Schleife. Mit Labels kannst du dieses Verhalten ändern. Ein Label ist ein Bezeichnername, auf den ein Doppelpunkt folgt. Es wird vor (oder über) die Schleife gesetzt. Ein solches Label kann dann mit break oder continue kombiniert werden, um festzulegen, auf welche Schleife sich die Anweisung beziehen soll.

outer: for (let i = 0; i < 10; i++) {
  for (let j = 0; j < 10; j++) {
    // ...
    if (j > 5) {
      continue outer;
    }
    // ...
  }
}

Schleifenzähler und asynchroner Code

Du musst aufpassen, dass du deine Zählvariable richtig deklarierst, wenn du mit asynchronem Code arbeitest. Schauen wir uns ein Beispiel an, in dem wir die Zählvariable asynchron mit setTimeout aufsummieren, nachdem wir 1 s gewartet haben. Wenn du den Zähler mit var deklarierst oder mit let, aber außerhalb des Headers, liefert der Code nicht das erwartete Ergebnis.

let sum = 0;
for (var i = 1; i < 4; i++) {
  setTimeout(function () { sum += i; }, 1000);
}
// eventually sum will be 12 instead of 6 (1+2+3)

let sum = 0;
let i;
for (i = 1; i < 4; i++) {
  setTimeout(function () { sum += i; }, 1000);
}
// same here, eventually sum will be 12 instead of 6 (1+2+3)

In diesen beiden Fällen hat i keinen Gültigkeitsbereich, der auf eine einzelne Iteration der Schleife beschränkt ist. Wenn die Summe berechnet wird, hat i bereits seinen Endwert 4 erreicht, was dazu führt, dass die Summe 4 + 4 + 4 = 12 beträgt.

Dieses Problem lässt sich vermeiden, indem du den Zähler mit let im Header deklarierst. Das hat den besonderen Effekt, dass jede Iteration ihre ganz eigene Variable let i bekommt, deren Gültigkeitsbereich genau auf diese eine Ausführung des Schleifenblocks beschränkt ist. Wenn die Summe also später berechnet wird, verweist jede Callback-Funktion auf ihre eigene Variable i, die noch den richtigen Wert enthält.

let sum = 0;
for (let i = 1; i < 4; i++) {
  setTimeout(function () { sum += i; }, 1000);
}
// eventually sum will be 6 (1+2+3) as expected