JavaScript-Schleifen: for, forEach und while richtig nutzen

Mit Schleifen führst du in JavaScript denselben Code mehrfach hintereinander aus. Sie sind nützlich, wenn du ein Array durchlaufen oder eine bestimmte Aufgabe mehrmals wiederholen musst. In diesem Kapitel sehen wir uns die for- und die while-Schleife an, die beiden am häufigsten genutzten Schleifen in JavaScript.

Die for-Schleife in JavaScript

Die for-Schleife in JavaScript führt Code eine festgelegte Anzahl von Malen aus. Ein Beispiel für den Einsatz der for-Schleife:

for (let i = 0; i < 5; i++) {
  console.log(i);
}

Die for-Schleife wird mit der Variablen „i“ initialisiert, die den Wert 0 hat. Die Bedingung „i < 5“ prüft, ob „i“ kleiner als 5 ist. Trifft sie zu, wird der Code zwischen den geschweiften Klammern ausgeführt und „i“ um 1 erhöht. Die Schleife läuft weiter, bis die Bedingung „i < 5“ falsch ist.

Dieser Code gibt die Zahlen 0 bis 4 in der Konsole aus.

Du kannst die for-Schleife auch nutzen, um ein Array zu durchlaufen:

let tableau = ['un', 'deux', 'trois', 'quatre', 'cinq'];

for (let i = 0; i < tableau.length; i++) {
  console.log(tableau[i]);
}

Die for-Schleife durchläuft das Array „tableau“ und nutzt dessen Eigenschaft „length“, um die Zahl der zu durchlaufenden Elemente zu bestimmen. Bei jedem Durchlauf wird der Wert des aktuellen Elements in der Konsole ausgegeben.

Mit der Anweisung „break“ verlässt du eine for-Schleife auch vorzeitig:

for (let i = 0; i < 5; i++) {
  console.log(i);
  if (i === 3) {
    break;
  }
}

continue in einer for-Schleife

Es gibt außerdem die Anweisung „continue“, die zum nächsten Durchlauf der laufenden Schleife springt, ohne den Rest des Codes im aktuellen Durchlauf auszuführen. Ein Beispiel für die Anweisung „continue“ in einer for-Schleife:

for (let i = 0; i < 10; i++) {
  if (i % 2 !== 0) {
    continue;
  }
  console.log(i);
}

In diesem Beispiel durchläuft die for-Schleife die Zahlen 0 bis 9. Die Anweisung „continue“ steht in der Schleife und prüft, ob der Wert von „i“ ungerade ist. Ist er das, springt „continue“ zum nächsten Durchlauf, ohne den Rest des Codes im aktuellen Durchlauf auszuführen.

Dieser Code gibt die geraden Zahlen von 0 bis 8 in der Konsole aus.

Die forEach-Schleife in JavaScript

Die forEach-Schleife in JavaScript durchläuft die Elemente eines Arrays oder eines Objekts. Ein Beispiel für die forEach-Schleife mit einem Array:

let tableau = ['un', 'deux', 'trois', 'quatre', 'cinq'];

tableau.forEach(function(element) {
  console.log(element);
});

Die forEach-Schleife durchläuft das Array „tableau“ und führt für jedes Element die als Argument übergebene anonyme Funktion aus. Der Wert des aktuellen Elements steht in der anonymen Funktion über die Variable „element“ zur Verfügung.

Dieser Code gibt jedes Element des Arrays in der Konsole aus.

Mit der Methode „Object.entries()“ nutzt du forEach auch für Objekte:

let objet = {
  un: 'valeur1',
  deux: 'valeur2',
  trois: 'valeur3'
};

Object.entries(objet).forEach(function([clé, valeur]) {
  console.log(clé + ': ' + valeur);
});

Die Methode „Object.entries()“ gibt für jede Eigenschaft des Objekts „objet“ ein Paar [Schlüssel, Wert] zurück. Die forEach-Schleife in JavaScript durchläuft dieses Array und führt für jeden Eintrag die als Argument übergebene anonyme Funktion aus. Schlüssel und Wert stehen in der anonymen Funktion über die Variablen „clé“ und „valeur“ zur Verfügung.

Dieser Code gibt jeden Eintrag des Arrays in der Form „clé: valeur“ in der Konsole aus.

Die while-Schleife in JavaScript

Die while-Schleife in JavaScript führt Code aus, solange die angegebene Bedingung wahr ist. Ein Beispiel für den Einsatz der while-Schleife:

let a = 0;

while (a < 5) {
  console.log(a);
  a++;
}

Die while-Schleife wird mit der Bedingung „a < 5“ initialisiert. Solange diese Bedingung wahr ist, wird der Code zwischen den geschweiften Klammern ausgeführt und die Variable „a“ um 1 erhöht. Die Schleife läuft weiter, bis die Bedingung „a < 5“ falsch ist.

Dieser Code gibt die Zahlen 0 bis 4 in der Konsole aus.

Du kannst auch die do-while-Schleife nutzen, die zuerst den Code zwischen den geschweiften Klammern ausführt und danach die Bedingung prüft:

let a = 0;

do {
  console.log(a);
  a++;
} while (a < 5);

In diesem Code läuft die do-while-Schleife mindestens einmal, weil die Bedingung erst nach dem ersten Durchlauf des Codes zwischen den geschweiften Klammern geprüft wird. Auch dieser Code gibt die Zahlen 0 bis 4 in der Konsole aus.

Du musst eine Anweisung einbauen, die die in der Bedingung der while-Schleife genutzte Variable erhöht oder verringert, sonst entsteht eine Endlosschleife. Fehlt diese Anweisung, bleibt die Bedingung der Schleife für immer wahr und die Schleife läuft endlos weiter.

Um das zu vermeiden, baust du eine Anweisung ein, die die in der Bedingung der while-Schleife genutzte Variable bei jedem Durchlauf verändert. So wird die Bedingung irgendwann falsch und die Schleife endet.

Eine Schleife lässt sich auch beenden, bevor die Bedingung falsch wird, und zwar mit der Anweisung „break“. „break“ unterbricht die Ausführung der Schleife sofort und springt zur nächsten Anweisung dahinter. Ein Beispiel für die Anweisung „break“ in einer while-Schleife:

let a = 0;

while (true) {
  console.log(a);
  a++;
  if (a >= 5) {
    break;
  }
}

Die while-Schleife wird mit der Bedingung „true“ initialisiert, sie läuft also weiter, solange diese Bedingung wahr ist. Allerdings steht die Anweisung „break“ in der Schleife und wird ausgeführt, sobald der Wert von „a“ 5 erreicht oder überschreitet. Das unterbricht die Ausführung der Schleife und springt zur nächsten Anweisung dahinter.

Dieser Code gibt die Zahlen 0 bis 4 in der Konsole aus.

Fazit

Wir haben die verschiedenen Schleifen von JavaScript durchgegangen: die for-Schleife, die forEach-Schleife und die while-Schleife. Du hast gesehen, wie du mit jeder davon Code wiederholt ausführst und wie du mit Steueranweisungen wie „break“ und „continue“ den Ablauf dieser Schleifen steuerst.