JavaScript Schleifen und Control Flow

Programme bestehen selten nur aus einer linearen Abfolge von Befehlen. Oft müssen wir Entscheidungen treffen (“Wenn das passiert, dann tu das”) oder Aufgaben wiederholen, bis eine Bedingung erfüllt ist. Hier kommen Control Flow (Kontrollfluss) und Schleifen ins Spiel. In diesem Teil unserer JavaScript-Serie schauen wir uns an, wie du die volle Kontrolle über deinen Code übernimmst.

Bedingte Anweisungen: if, else und else if

Die wichtigste Form des Kontrollflusses ist die if-Anweisung. Sie erlaubt es dir, Code-Blöcke nur unter bestimmten Bedingungen auszuführen.

let alter = 18;

if (alter >= 18) {
  console.log("Du bist volljährig.");
} else if (alter >= 16) {
  console.log("Du darfst schon ein bisschen was.");
} else {
  console.log("Du bist noch minderjährig.");
}

Ein häufiger Fehler bei Einsteigern ist die übermäßige Verwendung von else if. Oft lässt sich Code durch “Early Returns” (wenn man in Funktionen arbeitet) oder bessere Logik sauberer strukturieren.

Die switch-Anweisung

Wenn du eine Variable gegen viele verschiedene Werte prüfen musst, ist switch oft übersichtlicher als eine lange Kette von if-else-Anweisungen.

const tag = "Montag";

switch (tag) {
  case "Montag":
    console.log("Wochenstart!");
    break;
  case "Freitag":
    console.log("Fast Wochenende!");
    break;
  case "Samstag":
  case "Sonntag":
    console.log("Wochenende!");
    break;
  default:
    console.log("Ein ganz normaler Tag.");
}

Wichtig: Vergiss niemals das break! Ohne break “fällt” der Code in den nächsten Case (Fall-through), was meistens nicht gewollt ist.

Schleifen: Aufgaben wiederholen

Schleifen sind essenziell, um effizient mit Datenmengen zu arbeiten (z. B. eine Liste von Benutzern verarbeiten).

1. Die klassische for-Schleife

Sie ist das Arbeitstier unter den Schleifen. Du nutzt sie meistens dann, wenn du genau weißt, wie oft etwas wiederholt werden soll.

for (let i = 0; i < 5; i++) {
  console.log(`Durchgang Nummer: ${i}`);
}

Die Struktur besteht aus drei Teilen:

Initialisierung: let i = 0 (wird einmal am Anfang ausgeführt).
Bedingung: i < 5 (wird vor jedem Durchgang geprüft).
Iteration: i++ (wird nach jedem Durchgang ausgeführt).

2. while und do…while

Die while-Schleife läuft so lange, wie eine Bedingung true ist. Sie ist ideal, wenn man nicht genau weiß, wie viele Durchgänge nötig sind.

let counter = 0;
while (counter < 3) {
  console.log("Running...");
  counter++;
}

Die do...while-Schleife garantiert hingegen, dass der Code-Block mindestens einmal ausgeführt wird, da die Bedingung erst am Ende geprüft wird.

3. for…of und for…in

Moderne JavaScript-Entwicklung nutzt oft spezialisierte Schleifen für Objekte und Arrays.

for…of: Iteriert über die Werte eines iterierbaren Objekts (wie Arrays oder Strings).
for…in: Iteriert über die Eigenschaften (Keys) eines Objekts.

const fruits = ["Apfel", "Banane", "Kirsche"];

for (const fruit of fruits) {
  console.log(fruit); // Gibt die Namen aus
}

const user = { name: "Max", age: 30 };
for (const key in user) {
  console.log(`${key}: ${user[key]}`);
}

Tipp: Nutze für Arrays fast immer for...of oder Array-Methoden wie .forEach(), .map() etc. (die wir in einem späteren Teil genauer anschauen).

Steuerung: break und continue

Manchmal musst du eine Schleife vorzeitig abbrechen oder einen Durchgang überspringen.

break: Verlässt die komplette Schleife sofort.
continue: Springt sofort zum nächsten Durchgang der Schleife.

for (let i = 0; i < 10; i++) {
  if (i === 3) continue; // Überspringt die 3
  if (i === 7) break;    // Stoppt die Schleife bei 7
  console.log(i);
}

Best Practices für sauberen Control Flow

Vermeide tiefe Verschachtelungen: Wenn du mehr als drei Ebenen von if-Anweisungen hast, solltest du deinen Code refactoren (siehe unseren Blog-Post zu Refactoring Strategien).
Wähle die richtige Schleife: Nimm for...of für Arrays und while für logische Bedingungen, deren Ende nicht sofort absehbar ist.
Vorsicht vor Endlosschleifen: Stelle immer sicher, dass die Bedingung einer while-Schleife irgendwann false wird.
Lesbarkeit vor Kürze: Ein komplexer Ternary Operator (condition ? a : b) ist cool, aber ein einfaches if-else ist oft leichter zu lesen, besonders wenn die Logik komplexer wird.

Zusammenfassung

Mit if, switch und den verschiedenen for- und while-Schleifen hast du die Werkzeuge, um komplexe Logik in JavaScript abzubilden. Denke immer daran: Code wird für Menschen geschrieben. Wähle den Schleifentyp, der deine Absicht am klarsten ausdrückt.

In der nächsten Lektion schauen wir uns an, wie wir mit Fehlern umgehen, die während dieses Programmflusses auftreten können: Error Handling.

Weiterführende Links: