Javascript Bedingte Operatoren

Einführung in bedingte Operatoren

Bedingte Operatoren (auch bedingte Anweisungen genannt) in JavaScript sind die Art und Weise, wie ein Programm Entscheidungen trifft. Anstatt jede Zeile von oben nach unten auszuführen, ermöglichen sie es Ihrem Code, welchen Block er ausführt, basierend darauf, ob eine Bedingung true oder false ist.

Dieses Kapitel behandelt das vollständige Toolkit, das Sie täglich einsetzen:

• die Anweisungen if, else if und else,
• den ternären Operator ? : (und wann man ihn nicht verschachteln sollte),
• wie truthy und falsy Werte Bedingungen beeinflussen,
• Kurzschlussauswertung mit && und ||,
• den Nullish-Coalescing-Operator ?? für Standardwerte.

Eine Bedingung ist jeder Ausdruck, den JavaScript zu einem boolean auswerten kann. Sie wird üblicherweise aus Vergleichsoperatoren (>, <, ===, …) aufgebaut und mit logischen Operatoren (&&, ||, !) kombiniert.

Die if-Anweisung

Die if-Anweisung ist die grundlegendste Bedingungsanweisung und wird verwendet, um einen Codeblock nur dann auszuführen, wenn eine bestimmte Bedingung wahr ist.

Syntax

if (condition) {
  // code to execute if condition is true
}

Beispiel

Die else-Anweisung

Die else-Anweisung ergänzt if und führt ihren Block aus, wenn die if-Bedingung falsch ist.

Syntax

if (condition) {
  // code if condition is true
} else {
  // code if condition is false
}

Beispiel

Die else if-Anweisung

else if ermöglicht das sequenzielle Testen mehrerer Bedingungen. JavaScript prüft jede von oben nach unten und führt den ersten Zweig aus, dessen Bedingung wahr ist — der Rest wird übersprungen, selbst wenn er ebenfalls wahr wäre. Diese Reihenfolge ist wichtig: Setzen Sie Ihre spezifischsten oder vorrangigsten Bedingungen zuerst.

Syntax

if (condition1) {
  // code if condition1 is true
} else if (condition2) {
  // code if condition2 is true
} else {
  // code if neither condition is true
}

Beispiel

Wenn Sie einen Wert mit vielen festen Optionen vergleichen, kann eine Kette von else if schnell umständlich werden. Die switch-Anweisung ist für diesen Fall oft die bessere Wahl.

Der bedingte (ternäre) Operator ?

Der ternäre Operator (? :) ist eine kompakte Kurzschreibweise für if...else. Er ist der einzige JavaScript-Operator, der drei Operanden nimmt, und anders als eine Anweisung gibt er einen Wert zurück — was ihn ideal macht, um ein Ergebnis basierend auf einer Bedingung zuzuweisen.

Syntax

let result = condition ? value1 : value2;

Wenn condition wahr ist, ergibt der Ausdruck value1; andernfalls ergibt er value2.

Beispiel

Da er einen Wert erzeugt, ist der ternäre Operator auch direkt in Template-Strings und Funktionsargumenten nützlich:

Verschachtelte und verkettete ternäre Operatoren

Ein ternärer Operator kann selbst einen weiteren ternären Operator zurückgeben, was eine else if-Kette nachahmt:

Das funktioniert, aber die Lesbarkeit nimmt schnell ab. Vermeiden Sie das Verschachteln von ternären Operatoren, wenn die Logik nicht trivial ist — ein tief verkettetes a ? b : c ? d : e ist schwer zu lesen und leicht falsch zu verstehen. Bevorzugen Sie if...else if (oder switch), sobald Sie mehr als eine Bedingung haben, und verwenden Sie den ternären Operator nur für einfache Entweder-oder-Entscheidungen.

Truthy- und Falsy-Werte

Die Bedingung in einem if oder ternären Operator muss kein boolean sein. JavaScript wandelt jeden übergebenen Wert in true oder false um. Die Werte, die zu false umgewandelt werden, heißen falsy; alles andere ist truthy.

Es gibt genau acht falsy-Werte:

false
0        // and -0
0n       // BigInt zero
""       // empty string
null
undefined
NaN

Alles andere — einschließlich "0", "false", [] (leeres array) und {} (leeres object) — ist truthy.

Deshalb prüft eine gebräuchliche Kurzschreibweise wie if (name) { ... }, ob name einen verwendbaren Wert hat, anstatt name === "" oder name === undefined zu schreiben.

Kurzschlussauswertung

Die logischen Operatoren && und || geben nicht immer einen boolean zurück — sie geben einen ihrer Operanden zurück und hören auf auszuwerten, sobald das Ergebnis bekannt ist. Das nennt man Kurzschlussauswertung.

• a && b gibt a zurück, wenn a falsy ist, andernfalls b.
• a || b gibt a zurück, wenn a truthy ist, andernfalls b.

Der ||-Fallback hat einen Haken: Er behandelt alle falsy-Werte als fehlend. Wenn 0 oder "" ein gültiger Wert ist, würde || ihn fälschlicherweise ersetzen. Genau dieses Problem löst ??.

Weitere Informationen finden Sie im dedizierten Kapitel zu logischen Operatoren.

Der Nullish-Coalescing-Operator (??)

Der Nullish-Coalescing-Operator ?? gibt seine rechte Seite nur zurück, wenn die linke Seite null oder undefined ist — nicht für andere falsy-Werte wie 0 oder "".

Verwenden Sie ??, wenn Sie Standardwerte für Variablen festlegen, die legitim 0, "" oder false sein können. Verwenden Sie || nur dann, wenn Sie möchten, dass jeder falsy-Wert den Fallback auslöst.

Fazit

Bedingte Operatoren sind die Art und Weise, wie Ihr Code Entscheidungen trifft. Verwenden Sie if / else if / else für verzweigte Logik, den ternären Operator ? : für einfache Wertzuweisungen (niemals tief verschachtelt) und ?? für sichere Standardwerte. Kombinieren Sie sie mit Vergleichsoperatoren und logischen Operatoren, um jede Bedingung auszudrücken, und wechseln Sie zur switch-Anweisung, wenn Sie einen Wert mit vielen Optionen abgleichen.

Übungen