WebP 1 – Auswahl und Schleifen

Zusammenfassung

Alle bisherigen TypeScript-Anweisungen wurden der Reihe nach von oben nach unten ausgeführt. Mit Auswahlen (if/else, switch) kann ein Programm entscheiden, welchen Code-Pfad es einschlägt — abhängig von einer Bedingung. Mit Schleifen (while, for) kann Code beliebig oft wiederholt werden. Diese zwei Kontrollstrukturen sind der Kern jeder Programmlogik: Reagiere auf Eingaben, wiederhole Aufgaben, verarbeite Listen.

Schlüsselbegriffe

Bedingte Anweisung

Eine Anweisung, die nur ausgeführt wird, wenn eine bestimmte Bedingung erfüllt ist. In TypeScript: if (Bedingung) { ... }. Vergleichbar mit 'Wenn ... dann ...' im Alltag.

if/else

Die grundlegende Auswahl-Struktur. if prüft eine Bedingung. Falls wahr, wird der erste Block ausgeführt. Falls falsch, der else-Block (optional). Mehrere Bedingungen werden mit else if verkettet.

switch/case

Eine Mehrfachauswahl, die einen Wert gegen eine endliche Menge von Optionen vergleicht. Sinnvoll, wenn viele konkrete Fälle eines enum oder ähnlicher Werte unterschieden werden sollen.

Schleife

Eine Kontrollstruktur, bei der ein Code-Block so lange wiederholt wird, wie eine Bedingung erfüllt ist. In TypeScript: while (Bedingung) { ... } oder for (Init; Bedingung; Schritt) { ... }.

while-Schleife

Führt den Code-Block aus, solange die Bedingung true ist. Wenn die Bedingung von Anfang an false ist, wird der Block gar nicht ausgeführt. Für unbekannte Anzahl von Iterationen.

for-Schleife

Zählschleife mit drei Teilen im Kopf: Initialisierung, Bedingung, Schrittanweisung. Kompakt und übersichtlich für bekannte Anzahl von Iterationen oder Array-Durchläufe.

Falsy

Werte, die in einer Bedingung automatisch als false behandelt werden: 0, leerer String '', undefined, null, NaN. Alle anderen Werte gelten als true (truthy).

Konditionaloperator

Auch ternärer Operator genannt. Eine Kurzschreibweise für eine einfache if/else-Bedingung, die einen Wert zurückgibt. Syntax: Bedingung ? WertWennWahr : WertWennFalsch.

Schleifenbedingung

Die logische Bedingung im Schleifenkopf, die vor (oder nach) jedem Durchlauf ausgewertet wird. Bestimmt, ob die Schleife fortgesetzt oder beendet wird.

Kernkonzepte

Auswahlen: if / else

Die einfachste Form der Entscheidung: eine Bedingung und eine Aktion.

// Einarmiges if (Bedingung ohne Gegenfall)
if (element !== undefined) {
  element.innerText = "Das Element existiert.";
}
 
// Zweiarmiges if/else (Bedingung mit Gegenfall)
if (alter >= 18) {
  console.log("Alles erlaubt");
} else {
  console.log("Nichts erlaubt");
}

Die Bedingung steht in runden Klammern (...) und muss einen boolean-Wert ergeben. Der Code-Block in den geschweiften Klammern {...} wird nur ausgeführt, wenn die Bedingung true ist.

Mehrere Fälle: else if

// Jugendschutz-Beispiel: drei Fälle
if (alter >= 18) {
  console.log("Alles erlaubt");
} else if (alter >= 16) {
  console.log("Nur Bier & Wein");
} else {
  console.log("Nichts erlaubt");
}

Tipp

Immer vom allgemeinsten zum speziellsten Fall gehen: Zuerst den häufigsten Fall (>= 18), dann die Ausnahmen. So landet der häufigste Fall sofort im richtigen Zweig.

Bedingungen kombinieren

// Anmeldung: Benutzername UND Passwort müssen stimmen
if (benutzername === "admin" && passwort === "geheim") {
  console.log("Angemeldet!");
}
 
// Rabatt: Schüler ODER Rentner
if (isStudent || isRentner) {
  preis = preis * 0.8;
}

Statt drei verschachtelter if-Blöcke kann man Bedingungen mit && kombinieren:

// Verschachtelt (unübersichtlich):
if (Bedingung1) {
  if (Bedingung2) {
    if (Bedingung3) {
      Anweisung;
    }
  }
}
 
// Kombiniert (besser lesbar):
if (Bedingung1 && Bedingung2 && Bedingung3) {
  Anweisung;
}

Falsy-Werte

In TypeScript werden bestimmte Werte automatisch als false behandelt, wenn sie in einer Bedingung stehen:

Wert	Gilt als
`0`	`false`
`""` (leerer String)	`false`
`undefined`	`false`
`null`	`false`
`NaN` (Not a Number)	`false`
Alle anderen Werte	`true`

// Kurze Schreibweise: Existiert das Element?
if (element) {                    // statt: if (element !== undefined)
  element.innerText = "Gefunden";
}
 
// Boolean-Variable direkt prüfen:
if (isAdmin) {                    // statt: if (isAdmin === true)
  showAdminPanel();
}
if (!isAdmin) {                   // statt: if (isAdmin === false)
  showLoginPage();
}

switch / case: Mehrfachauswahl

Wenn viele konkrete Werte eines Typs unterschieden werden sollen (typisch bei enum), ist switch übersichtlicher als viele else if.

enum WorldElement { FLOOR, WALL, BEEPER }
 
let position: WorldElement = WorldElement.FLOOR;
 
switch (position) {
  case WorldElement.FLOOR:
    console.log("Vor Karel ist freier Boden.");
    break;
  case WorldElement.WALL:
    console.log("Vor Karel ist eine Wand.");
    break;
  case WorldElement.BEEPER:
    console.log("Vor Karel liegt ein Beeper.");
    break;
}

Wichtig

Das break am Ende jedes case-Blocks ist zwingend nötig! Ohne break läuft das Programm in den nächsten case-Block weiter (sog. "fall-through") — fast immer ein Fehler.

Schleifen

while — "solange wie"

let water: number = 0;
 
while (water < 100) {
  console.log(`Das Wasser kocht bei ${water} Grad noch nicht.`);
  water += Math.random() * 5 + 5;  // Erhöhe um 5–10
}
 
console.log("Das Wasser kocht!");

Der Code-Block wird wiederholt, solange die Bedingung true ist. Wenn die Bedingung von Anfang an false ist, wird der Block gar nicht ausgeführt.

Achtung

Endlosschleife: Wenn die Bedingung niemals false wird, läuft die Schleife unendlich. Das blockiert das Programm (und leert bei mobilen Geräten schnell den Akku). Immer sicherstellen, dass die Bedingung irgendwann false wird.

do/while — mindestens einmal

Eine Sonderform: Der Block wird erst ausgeführt, dann die Bedingung geprüft.

do {
  // Dieser Block läuft mindestens einmal!
  eingabe = prompt("Bitte Passwort eingeben:");
} while (eingabe !== "geheim");

for — Zählschleife

Die for-Schleife fasst Start, Bedingung und Schritt kompakt in einer Zeile zusammen:

// Syntax: for (Initialisierung; Bedingung; Schrittanweisung)
for (let i: number = 0; i < 5; i++) {
  console.log(`Iteration ${i}`);
}
// Gibt aus: 0, 1, 2, 3, 4

Array mit for-Schleife durchlaufen:

let namen: string[] = ["Anna", "Ben", "Christin", "Dennis"];
 
for (let i: number = 0; i < namen.length; i++) {
  console.log(`${namen[i]} ist Nummer ${i + 1} auf der Liste.`);
}

Tipp

namen.length gibt die Anzahl der Elemente zurück. Da der Index bei 0 beginnt, lautet die Bedingung i < namen.length (nicht <=). Das letzte gültige Element steht an namen[namen.length - 1].

Vergleich der Schleifentypen:

Schleife	Wann einsetzen
`while`	Anzahl der Durchläufe unbekannt (z. B. "solange Benutzer keinen gültigen Wert eingibt")
`for`	Anzahl der Durchläufe bekannt oder Array-Durchlauf
`do/while`	Code soll mindestens einmal ausgeführt werden

Lernkarten

Frage

Was ist der Unterschied zwischen == und === bei Bedingungen?

Antwort

== vergleicht nur den Wert (mit automatischer Typumwandlung): '3' == 3 ist true. === vergleicht Wert UND Typ: '3' === 3 ist false. Immer === verwenden.

1 / 7

Übungsfragen

Was gibt folgender Code aus: if (0) { console.log('A'); } else { console.log('B'); }

1 / 6