if, else if, else

Bis hierhin lief dein Code immer geradeaus. Jede Zeile kam dran, in der Reihenfolge, in der sie dastand. Ab jetzt kann ein Programm zwei Wege nehmen.

01 / 04Die drei Bausteine

<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p>

const warenkorbInCent = 4500;

if (warenkorbInCent >= 5000) {
  console.log("Versand frei.");
} else if (warenkorbInCent >= 2000) {
  console.log("Versand 295 Cent.");
} else {
  console.log("Versand 495 Cent.");
}

// Ein if ohne else geht auch, dann passiert im anderen Fall nichts.
if (warenkorbInCent === 0) {
  console.log("Der Warenkorb ist leer.");
}

console.log("Fertig.");

if bekommt eine Bedingung in runden Klammern und einen Block in geschweiften. Ist die Bedingung wahr genug im Sinne von Lektion 3.3, läuft der Block. Sonst nicht.

else if hängt einen weiteren Fall daran. Davon darfst du beliebig viele hintereinander schreiben.

else fängt alles Übrige ab. Es hat keine Bedingung, denn es ist der Rest.

Zwei Kleinigkeiten, die man am Anfang falsch macht: Hinter die schließende geschweifte Klammer gehört kein Semikolon. Und else steht in derselben Zeile wie die schließende Klammer des Zweigs davor, nicht in einer neuen. Beides ist reine Konvention, aber eine sehr einheitliche.

Ein if ohne else ist völlig normal und sogar der häufigere Fall. Wenn im anderen Fall nichts passieren soll, schreibst du auch nichts hin.

02 / 04Der erste passende Zweig gewinnt

<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p>

// Falsch herum: die weiteste Bedingung steht oben und fängt alles ab.
function noteFalsch(punkte) {
  if (punkte >= 70) {
    return "befriedigend";
  }
  if (punkte >= 90) {
    return "sehr gut";
  }
  return "nicht bestanden";
}

// Richtig herum: die engste Bedingung zuerst.
function noteRichtig(punkte) {
  if (punkte >= 90) {
    return "sehr gut";
  }
  if (punkte >= 70) {
    return "befriedigend";
  }
  return "nicht bestanden";
}

console.log("95 Punkte, falsch herum:", noteFalsch(95));
console.log("95 Punkte, richtig herum:", noteRichtig(95));

Das ist die wichtigste Regel dieser Lektion, und der Fehler daraus ist der häufigste in ganzen Notenskalen, Rabattstaffeln und Versandregeln.

Sobald ein Zweig zutrifft, ist die Kette zu Ende. Alle weiteren Bedingungen werden gar nicht mehr geprüft.

Im Beispiel steht in der falschen Fassung punkte >= 70 oben. Für 95 Punkte trifft das zu, also kommt „befriedigend” heraus, und die Zeile mit >= 90 sieht der Browser nie. Die Funktion ist nicht kaputt, sie ist nur in der falschen Reihenfolge aufgeschrieben.

Die Regel: Die engste Bedingung steht oben, die weiteste unten. Bei Zahlenbereichen heißt das von oben nach unten absteigend, also erst 90, dann 80, dann 70.

Prüfen kannst du das mit einer einfachen Frage: Gibt es einen Wert, der auf zwei Zweige passt? Wenn ja, muss der speziellere zuerst kommen.

03 / 04Die geschweiften Klammern

<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p>

const zaehler = 5;

// Ohne Klammern gehört nur die NÄCHSTE Zeile zum if.
if (zaehler === 0)
  console.log("Das siehst du nicht, denn der Zähler ist 5.");
  console.log("Das hier aber schon, obwohl es eingerückt ist.");

console.log("---");

// Mit Klammern gehört alles dazwischen dazu.
if (zaehler === 0) {
  console.log("Das siehst du auch nicht.");
  console.log("Und das hier ebenfalls nicht.");
}

Bei einem Block aus genau einer Zeile darfst du die geschweiften Klammern weglassen. Dann gehört die nächste Zeile zum if, und nur die.

Im Beispiel sieht es so aus, als gehörten beide Ausgaben dazu, denn beide sind eingerückt. Der Browser liest keine Einrückungen. Die zweite Zeile läuft immer, unabhängig von der Bedingung.

Schreib die Klammern immer hin. Nicht weil die kurze Form falsch wäre, sondern weil die zweite Zeile bestimmt kommt: Du ergänzt später ein console.log zum Nachschauen, und plötzlich stimmt die Logik nicht mehr, ohne dass sich die Bedingung geändert hätte. Zwei Zeichen gegen einen Fehler, den man beim Lesen nicht sieht, ist ein gutes Geschäft.

04 / 04Früher Ausstieg

<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p>

// Vorher: jede Prüfung rückt den eigentlichen Inhalt weiter nach rechts.
function preisVorher(menge, preisInCent) {
  if (menge > 0) {
    if (preisInCent > 0) {
      return menge * preisInCent;
    } else {
      return 0;
    }
  } else {
    return 0;
  }
}

// Nachher: Sonderfälle oben abfangen, der Normalfall steht ganz links.
function preisNachher(menge, preisInCent) {
  if (menge <= 0) {
    return 0;
  }
  if (preisInCent <= 0) {
    return 0;
  }
  return menge * preisInCent;
}

console.log("Vorher: ", preisVorher(3, 500));
console.log("Nachher:", preisNachher(3, 500));

Beide Funktionen im Beispiel tun dasselbe. Die erste ist trotzdem schwerer zu lesen, und der Grund ist die Einrückung.

Jede verschachtelte Prüfung schiebt den eigentlichen Inhalt eine Stufe weiter nach rechts. Bei drei Ebenen steht das, worum es geht, tief eingerückt zwischen lauter schließenden Klammern, und du musst rückwärts zählen, um zu wissen, unter welchen Bedingungen du dort überhaupt ankommst.

Die zweite Fassung dreht es um: Sonderfälle oben abfangen und sofort verlassen. Danach weißt du, dass alles in Ordnung ist, und der Normalfall steht ganz links ohne jede Einrückung.

Das nennt sich früher Ausstieg oder Guard Clause. Es braucht ein return, funktioniert also nur in einer Funktion, und ab Abschnitt 5 wirst du fast nur noch so schreiben. Der Nebeneffekt ist, dass die else-Zweige verschwinden: Wenn der if-Zweig ohnehin aussteigt, braucht der Rest kein else mehr.