Jedes nützliche Programm erreicht irgendwann einen Entscheidungspunkt. Sollte dieser Button das Formular absenden oder einen Fehler anzeigen? Sieht dieser Nut...

Jedes nützliche Programm erreicht irgendwann einen Entscheidungspunkt. Soll diese Schaltfläche das Formular absenden oder eine Fehlermeldung anzeigen? Sieht dieser Benutzer das Admin-Dashboard oder die Gastansicht? JavaScript beantwortet diese Fragen mit bedingten Anweisungen. Sie sind die Steuerventile Ihres Codes: Sie öffnen einen Pfad und schließen einen anderen, basierend darauf, ob ein Ausdruck als true oder false ausgewertet wird. Ohne sie würde Ihr Skript einfach von oben nach unten durchlaufen, ohne jemals auf die Person zu reagieren, die es benutzt.

Der einfachste Zweig: if

Die if-Anweisung ist das erste Tor, das Sie durchschreiten. Sie setzen eine Bedingung in Klammern. Wenn diese Bedingung zu true führt, wird der darunter liegende Codeblock ausgeführt. Wenn sie zu false führt, überspringt JavaScript den Block vollständig und fährt mit dem Rest der Datei fort.

Genau das ist es, was Sie für einfache, einmalige Prüfungen benötigen. Stellen Sie sich vor, Sie validieren ein Formularfeld, bevor Sie etwas an einen Server senden:

const email = document.getElementById("email").value;

if (email === "") {
  alert("Please enter your email.");
}

Keine email, keine Übermittlung. Die Logik ist direkt und klar. Verwenden Sie if, wenn es nur einen Sonderfall gibt, den es abzufangen gilt, und keine alternative Aktion erforderlich ist.

Entweder–oder-Entscheidungen: if...else

Die meisten realen Entscheidungen haben zwei Seiten. Das if...else-Paar deckt genau das ab. Ein Block wird ausgeführt, wenn die Bedingung wahr (true) ist, der andere, wenn sie falsch (false) ist. Die beiden Pfade schließen sich gegenseitig aus.

Stellen Sie sich eine Prüfung des Dark-Mode beim Laden der Seite vor:

const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;

if (prefersDark) {
  document.body.classList.add("dark");
} else {
  document.body.classList.add("light");
}

Der Browser wird niemals beide Klassen hinzufügen. Er wählt einen Pfad, führt ihn aus und macht weiter. Wann immer Ihre Logik sauber in zwei mögliche Ergebnisse aufgeteilt ist, ist dies die richtige Struktur.

Mehrere Pfade: if...else if...else

Nicht jedes Problem ist binär. Manchmal benötigen Sie eine Leiter an Möglichkeiten. Die if...else if...else-Kette ermöglicht es Ihnen, mehrere Bedingungen nacheinander zu testen. JavaScript wertet diese von oben nach unten aus und führt den ersten Block aus, dessen Bedingung wahr ist. Nach diesem Treffer wird der Rest der Kette ignoriert.

Ein klassisches Beispiel ist die Zuordnung einer numerischen Punktzahl zu einer Note:

const score = 87;
let grade;

if (score >= 90) {
  grade = "A";
} else if (score >= 80) {
  grade = "B";
} else if (score >= 70) {
  grade = "C";
} else {
  grade = "F";
}

Die Reihenfolge ist hier von enormer Bedeutung. Wenn Sie score >= 70 vor score >= 90 prüfen würden, würde fast jede bestandene Note in der Kategorie C landen, da der erste Treffer gewinnt. Ordnen Sie Ihre Bedingungen von der spezifischsten zur am wenigsten spezifischen und schließen Sie die Kette immer mit einem abschließenden else ab, um alles abzufangen, was sonst durchrutschen würde.

Abgleich fester Werte: switch

Wenn Sie eine Variable mit einer Liste bekannter Konstanten vergleichen, wird eine lange if...else-Kette unübersichtlich. Die switch-Anweisung schafft Ordnung. Sie wertet einen Ausdruck einmal aus und vergleicht ihn dann mithilfe des strikten Gleichheitsoperators (===) mit case-Labels. Dies macht den Code leichter lesbar, wenn die Optionen diskret und benannt sind.

Stellen Sie sich vor, Sie legen die Ladenöffnungszeiten basierend auf dem aktuellen Tag fest:

const day = new Date().getDay();

switch (day) {
  case 0:
    console.log("Sunday hours: 10am - 4pm");
    break;
  case 6:
    console.log("Saturday hours: 9am - 6pm");
    break;
  default:
    console.log("Weekday hours: 8am - 8pm");
}

Seien Sie vorsichtig mit break. Wenn Sie es weglassen, läuft die Ausführung in den nächsten case weiter. Dieses Verhalten ist gelegentlich nützlich, verursacht aber meistens stille Fehler. Richtig eingesetzt, macht switch Ihre Absicht auf einen Blick deutlich und hält verwandte Zweige in einer ordentlichen Spalte ausgerichtet.

Kompakte Entscheidungen: Der ternäre Operator

Der ternäre Operator – geschrieben als ? : – ist ein Ausdruck, keine Anweisung. Diese Unterscheidung ist wichtig