Menu

JavaScript if/else, else if & Ternary Operator

So funktioniert if/else in JavaScript: Bedingungen schreiben, else-if-Ketten bauen, Truthy/Falsy-Fallen umgehen und wann der Ternary-Operator die bessere Wahl ist.

Aufbau einer if-Abfrage in JavaScript

Eine if-Abfrage führt einen Codeblock nur dann aus, wenn eine Bedingung erfüllt ist. Der Aufbau besteht aus dem Schlüsselwort, einer Bedingung in runden Klammern und einem Block in geschweiften Klammern:

index.js
Output
Click Run to see the output here.

Die Bedingung age >= 18 ergibt true, also wird der Block ausgeführt. Wäre age dagegen 16, würde die Bedingung false liefern und JavaScript würde den Block komplett überspringen.

Die geschweiften Klammern sind bei einem einzelnen Statement zwar technisch optional, aber setze sie trotzdem immer. if-Anweisungen ohne Klammern sind eine klassische Bug-Quelle: Irgendwann fügt jemand eine zweite Zeile hinzu und übersieht, dass sie gar nicht mehr zum Block gehört.

else: der Fallback-Zweig

Kombiniere if mit else, um anderen Code auszuführen, wenn die Bedingung false ist:

index.js
Output
Click Run to see the output here.

Es läuft genau einer der beiden Zweige. Niemals beide, niemals keiner. else bekommt keine eigene Bedingung – es ist schlicht der Auffangzweig für den Fall, dass das if nicht zutrifft.

else if: Mehrere Fälle abdecken

Sobald du mehr als zwei Fälle hast, hängst du sie mit else if aneinander. JavaScript prüft die Bedingungen der Reihe nach und springt beim ersten Treffer raus:

index.js
Output
Click Run to see the output here.

Nur ein Zweig wird ausgeführt. Sobald eine Bedingung zutrifft, werden alle weiteren übersprungen – auch wenn sie ebenfalls wahr wären. Genau deshalb kommt es auf die Reihenfolge an: Würdest du die Kette umdrehen und zuerst score >= 60 prüfen, bekäme jeder über 60 ein D.

Das abschließende else ist optional, aber es macht deine Absicht deutlich: „Wenn nichts anderes zugetroffen hat, mach das hier."

Bedingungen dürfen beliebige Ausdrücke sein

Was in den Klammern steht, muss kein Vergleich sein. Es kann jeder beliebige Ausdruck sein – JavaScript wandelt das Ergebnis automatisch in einen Boolean um:

index.js
Output
Click Run to see the output here.

Nicht-leere Strings sind truthy. 0 und leere Strings sind falsy – deshalb landet der Code im else-Zweig, wenn items.length gleich 0 ist. Das ist die übliche JavaScript-Idiom-Variante für „Ist überhaupt was da?".

Die vollständige Liste der Falsy-Werte ist überschaubar und lohnt sich auswendig zu lernen: false, 0, -0, 0n, "", null, undefined und NaN. Alles andere ist truthy – auch "0", "false", [] und {}. Gerade die letzten beiden sind typische Stolperfallen.

Bedingungen kombinieren: && und ||

Mit && (und) sowie || (oder) lassen sich mehrere Bedingungen verknüpfen:

index.js
Output
Click Run to see the output here.

&& verlangt, dass beide Seiten truthy sind, || reicht schon eine. Beide arbeiten per Short-Circuit: && bricht beim ersten falsy-Wert ab, || beim ersten truthy-Wert. Das ist wichtig, wenn die zweite Bedingung einen Seiteneffekt hat oder einen Fehler werfen würde – user && user.name gibt sicher undefined zurück, falls user gleich null ist, ohne dass etwas um die Ohren fliegt.

Bei gemischter Logik setzt du am besten Klammern, damit die Auswertungsreihenfolge klar ist:

index.js
Output
Click Run to see the output here.

Ohne die Klammern bindet && stärker als || – und das ist meistens genau das Gegenteil von dem, was man beim Lesen erwartet.

== oder === in JavaScript (nimm ===)

Wenn du in einem if auf Gleichheit prüfst, nutze === und !== statt == und !=:

index.js
Output
Click Run to see the output here.

== wandelt die Typen vor dem Vergleich um, was zu Überraschungen führt: "" == 0 ist true, und null == undefined ebenfalls. === dagegen vergleicht ohne Typumwandlung – gleicher Typ und gleicher Wert. Nimm standardmäßig ===. Die einzige übliche Ausnahme ist x == null, denn damit prüfst du in einem Rutsch sowohl auf null als auch auf undefined.

Der ternäre Operator in JavaScript

Wenn du nur zwischen zwei Werten wählen musst, ist der ternäre Operator bedingung ? a : b oft eleganter als ein komplettes if/else:

index.js
Output
Click Run to see the output here.

Der Ternary ist ein Ausdruck — er liefert einen Wert zurück. Genau das unterscheidet ihn von if/else, das ein Statement ist. Nimm den Ternary, wenn du das Ergebnis brauchst (Variable zuweisen, returnen, String zusammenbauen). Nimm if/else, wenn es dir um Seiteneffekte geht.

Du kannst Ternaries verschachteln, aber die Lesbarkeit geht dabei rapide den Bach runter:

// Mach das nicht:
const grade = score >= 90 ? "A" : score >= 80 ? "B" : score >= 70 ? "C" : "F";

Wenn du mehrere Bedingungen hintereinander prüfen willst, greif zur else if-Kette.

Verschachteltes if vs. flache else-if-Kette

Manchmal ergibt eine Bedingung nur innerhalb einer anderen Sinn. Dafür ist Verschachtelung völlig okay:

index.js
Output
Click Run to see the output here.

Drei oder vier Ebenen tief zu verschachteln ist allerdings ein Code Smell. Flach machen lässt sich das mit frühen Returns oder einer kombinierten Bedingung:

index.js
Output
Click Run to see the output here.

Early Returns halten jeden Zweig kurz und auf derselben Einrückungsebene. Das liest sich deutlich angenehmer als eine Pyramide aus verschachtelten ifs.

Ein klassischer Stolperstein: Zuweisung in der if-Abfrage

= weist zu. === vergleicht. Die beiden in einer Bedingung zu verwechseln, ist ein Klassiker unter den Bugs:

index.js
Output
Click Run to see the output here.

status = "done" weist status den Wert "done" zu und liefert als Ergebnis "done" – und das ist truthy. Der Block läuft also immer, und nebenbei hast du dir still und heimlich die Variable überschrieben. Linter erkennen so etwas, der Strict Mode aber nicht. Also pass auf und greif zu ===, wenn du wirklich vergleichen willst.

Weiter geht's mit switch

Wenn du einen Wert gegen viele mögliche Treffer abgleichen willst, fühlt sich eine lange else if-Kette schnell sperrig an. Genau dafür gibt es in JavaScript das switch-Statement – mit seinen eigenen Eigenheiten rund um break und Fall-Through. Darum geht's als Nächstes.

Häufig gestellte Fragen

Wie schreibt man in JavaScript ein if/else-Statement?

Nach if kommt die Bedingung in runden Klammern, danach ein Block in geschweiften Klammern. Mit else hängst du einen zweiten Block für den Fallback dran. Zum Beispiel: if (age >= 18) { console.log('adult'); } else { console.log('minor'); }. Als Bedingung ist jeder Ausdruck erlaubt — JavaScript wandelt ihn intern automatisch in einen Boolean um.

Was ist der Unterschied zwischen else if und verschachtelten ifs?

Mit else if baust du eine Kette, bei der nur ein einziger Zweig ausgeführt wird — JavaScript prüft die Bedingungen der Reihe nach und stoppt beim ersten Treffer. Verschachtelte if-Statements stehen dagegen ineinander und dienen meist dazu, eine zweite Bedingung nur dann zu prüfen, wenn die erste wahr war. Eine flache else if-Kette ist in fast allen Fällen besser lesbar als tief verschachtelte ifs.

Wann sollte ich den Ternary-Operator statt if/else nehmen?

Der Ternary condition ? a : b ist ideal, wenn du innerhalb eines Ausdrucks zwischen zwei Werten wählen willst — also beim Zuweisen einer Variable, beim return aus einer Funktion oder beim Zusammenbauen eines Strings. Sobald in den Zweigen richtige Statements mit Seiteneffekten stehen oder eine Seite länger als ein kurzer Ausdruck ist, bleib bei if/else. Verschachtelte Ternaries werden extrem schnell unleserlich.

Warum verhält sich if (0) in JavaScript wie if (false)?

Tut es auch — beide überspringen den Block. JavaScript wandelt die Bedingung in einen Boolean um, und 0, '', null, undefined, NaN sowie false gelten alle als falsy. Der Haken: Werte wie '0' (ein nicht-leerer String) oder [] (ein leeres Array) sind truthy — das überrascht viele, die aus anderen Sprachen kommen.

Lerne mit Coddy zu programmieren

LOS GEHT'S