JavaScript-Schleifen
JavaScript-Schleifen lernen: for, while, do...while, for...in und for...of, plus break und continue. Klare Syntax, ausführbare Beispiele und typische Fallstricke.
Einführung in JavaScript-Schleifen
JavaScript-Schleifen sind ein grundlegendes Konzept in der Programmierung, das die mehrfache Ausführung von Codeblöcken ermöglicht. Diese Anleitung vermittelt ein tiefes Verständnis der verschiedenen Schleifentypen in JavaScript, einschließlich ihrer Syntax und praktischer Anwendungen.
Was sind Schleifen in JavaScript?
Eine Schleife führt denselben Codeblock immer wieder aus, solange eine Bedingung wahr bleibt. Jeder Durchlauf des Schleifenkörpers wird als Iteration bezeichnet. Schleifen ermöglichen es, jeden Eintrag einer Liste zu verarbeiten, eine Aktion eine feste Anzahl von Malen zu wiederholen oder fortzufahren, bis sich ein Zustand ändert — alles ohne Code kopieren und einfügen zu müssen.
Warum Schleifen verwenden?
Ohne Schleifen müsste man dieselbe Anweisung für jede Wiederholung einmal schreiben:
console.log(1);
console.log(2);
console.log(3);
// ...and so on for every numberEine Schleife fasst das in wenige Zeilen zusammen, die für 3 Zahlen oder 3 Millionen funktionieren. Das Ergebnis ist Code, der kürzer, leichter zu ändern und weitaus weniger fehleranfällig ist.
Die verschiedenen Schleifentypen verstehen
Schauen wir uns die verschiedenen Schleifen in JavaScript, ihre Syntax und ihre effektive Nutzung an.
Die while-Schleife
Die while-Schleife ist der einfachste Schleifentyp in JavaScript. Sie prüft die Bedingung vor jeder Iteration und läuft so lange, wie diese Bedingung wahr ist. Verwende sie, wenn du im Voraus nicht weißt, wie oft du wiederholen musst — zum Beispiel beim Lesen bis zu einem Endmarkierungszeichen.
Syntax:
while (condition) {
// code to be executed
}Beispiel:
Der Schleifenkörper muss die Bedingung irgendwann auf false setzen. Geschieht das nie, entsteht eine Endlosschleife, die die Seite einfriert. Das i++ oben stellt sicher, dass die Schleife endet — vergisst man es, bleibt i < 5 für immer wahr.
Die do...while-Schleife
Die do...while-Schleife prüft ihre Bedingung nach jeder Iteration, sodass der Körper immer mindestens einmal ausgeführt wird — selbst wenn die Bedingung von Anfang an falsch ist. Das ist praktisch für Eingabeaufforderungen oder Menüs, die mindestens einmal angezeigt werden müssen, bevor entschieden wird, ob wiederholt werden soll.
Syntax:
do {
// code to be executed
} while (condition);Beispiel:
Die for-Schleife
Die for-Schleife ist die am häufigsten verwendete Schleife. Sie fasst drei Teile in einer Zeile zusammen: eine Initialisierung (wird einmalig zu Beginn ausgeführt), eine Bedingung (wird vor jeder Iteration geprüft) und einen abschließenden Ausdruck (wird nach jeder Iteration ausgeführt, üblicherweise zum Hochzählen eines Zählers). Sie ist die natürliche Wahl, wenn man weiß, wie oft man wiederholen möchte.
Syntax:
for (initialization; condition; finalExpression) {
// code to be executed
}Beispiel:
Die for...in-Schleife
Diese Schleife iteriert über die aufzählbaren Eigenschaftsnamen (Schlüssel) eines object. Nutze sie, wenn du die Schlüssel eines object benötigst. Vermeide sie für arrays: Sie liefert string-Indizes ("0", "1", …), garantiert keine Reihenfolge und durchläuft auch geerbte Eigenschaften — verwende stattdessen for...of oder array-Methoden.
Syntax:
for (variable in object) {
// code to be executed
}Beispiel:
Die for...of-Schleife
Die for...of-Schleife iteriert über die Werte iterierbarer Objekte wie arrays, strings, Map und Set. Sie ist der sauberste Weg, Array-Elemente zu durchlaufen, wenn man den Index nicht benötigt. Merke den Unterschied: for...in liefert Schlüssel, for...of liefert Werte.
Syntax:
for (variable of iterable) {
// code to be executed
}Beispiel:
Die richtige Schleife wählen
| Schleife | Am besten geeignet für | Liefert |
|---|---|---|
for | Eine bekannte Anzahl von Wiederholungen oder wenn der Index benötigt wird | Einen selbst verwalteten Zähler |
while | Wiederholen bis eine Bedingung sich ändert, Anzahl unbekannt | Nichts — du verwaltest den Zustand selbst |
do...while | Wie while, muss aber mindestens einmal ausgeführt werden | Nichts — führt den Körper zuerst aus |
for...in | Iteration über die Schlüssel eines object | Eigenschaftsnamen (strings) |
for...of | Iteration über Werte eines array, string, Map oder Set | Jeden Wert |
Für die meisten array-Aufgaben wirst du auch Methoden wie forEach, map und filter kennenlernen (siehe array methods) — sie sind oft lesbarer als eine manuelle Schleife.
Verschachtelte Schleifen
Eine Schleife kann eine andere Schleife enthalten. Die innere Schleife wird für jeden einzelnen Durchlauf der äußeren Schleife vollständig ausgeführt, was für Gitter, Tabellen und Paare nützlich ist.
Schleifenausführung steuern
break in Schleifen verwenden
Die break-Anweisung kann verwendet werden, um eine Schleife zu beenden, bevor die Bedingung false wird.
Beispiel:
continue in Schleifen verwenden
Die continue-Anweisung überspringt die aktuelle Iteration und fährt mit der nächsten fort.
Beispiel:
Aus verschachtelten Schleifen ausbrechen
Standardmäßig beendet break nur die innerste Schleife. Um von einer inneren Schleife aus einer äußeren zu entkommen, versehe die äußere Schleife mit einem Label und breche zu diesem.
Fazit
Das Verstehen und effektive Verwenden verschiedener Schleifentypen in JavaScript verbessert deine Fähigkeit, prägnanten und effizienten Code zu schreiben. Wähle for, wenn du die Anzahl kennst, while/do...while, wenn nicht, for...of für Werte und for...in für object-Schlüssel — und achte auf Endlosschleifen.
Weiter mit verwandten Themen: bedingte Operatoren, arrays, array methods und Funktionen.