Beim bedingten Operator handelt es sich in JavaScript um eine kürzere Alternative zur bedingten Anweisung (if-else-Bedingung). Der bedingte Operator wird auch als ternärer Operator – Englisch: Ternary Operator – genannt.

Hintergrund: Operatoren in JavaScript

In meinem Artikel “JavaScript: Operatoren” bin ich auf die Operatoren in JS eingegangen. Die wichtigsten sind sicherlich +, -, =, / oder auch *. Neben verschiedenen Operator-Typen – auf die ich im verlinkten Beitrag eingegangen bin – lassen sich die Operatoren auch basierend auf der Anzahl der benötigten Operanden kategorisieren.

Dabei unterscheidet man in:

• Unäre Operatoren bzw. einstellige Verknüpfungen (Unary Operator): Diese brauchen nur einen Operanden. Ein klassisches Beispiel wäre der “typeof”-Operator, da dieser nur einen Operanden rechts von sich benötigt und dann einen Wert zurückgibt. Ein anderes Beispiel wäre der Inkrementor ++.
• Binäre Operatoren bzw. zweistellige Verknüpfungen (Binary Operator): Diese brauchen zwei Operanden. Ein Beispiel wäre hier eine einfache Rechnung wie 10 / 2, da dieser Operator (also /) zwei Operanden rechts und links von sich braucht, um ausgeführt werden zu können.
• Ternäre Operatoren bzw. dreistellige Verknüpfungen (Ternary Operator): Diese brauchen drei Operanden. Hier gibt es nur einen Operator in JavaScript, der unter dieser Kategorie fällt: Der bedingte Operator.

Syntax des bedingten Operators

Der bedingte Operator besteht aus drei Teilen:

• Bedingter Ausdruck
• Wahrheitsgemäßer Ausdruck
• Falscher Ausdruck

Hier ein einfaches Beispiel:

let result = 80 > 50 ? "Gut" : "Schlecht"

Erklärung:

• Der bedingte Ausdruck wäre “80 > 50”. Hier wird geprüft, ob 80 größer als 50 ist.
• Danach folgt ein Fragezeichen ?.
• Dann kommt der wahrheitsgemäße Ausdruck, der nur ausgeführt wird, wenn der bedingte Ausdruck zutrifft. In unserem Fall wäre das “Gut”.
• Dann kommt ein Doppelpunkt :.
• Zum Schluss kommt dann noch der falsche Ausdruck, der ausgeführt wird, wenn der bedingte Ausdruck nicht zutrifft.

Bedingten Operator in JavaScript nutzen: Vergleich zum if-else-Statement

Um in JavaScript einen Codeblock auszuführen, der auf einer bestimmten Bedingung basiert, können wir eine bedingte Anweisung nutzen:

var a = 1;
var b = 2;

if (a < b) {
  var result = a + b;
} else {
  var result = a - b;
}

Weitere Bedingungen können mit einem else-if hinzugefügt werden:

var a = 1;
var b = 2;

if (a < b) {
  var result = a + b;
} else if (a > b) {
  var result = a - b;
} else {
   var result = a / b;
}

Wie man sehen kann sind mit einer if-Bedingung viele Zeilen Code notwendig um das gewünschte Ergebnis zu erzielen. Mit dem ternären Operator lässt sich das selbe Ergebnis mit einer Zeile erzielen. Beginnen wir mit dem ersten Beispiel von vorher und schreiben dieses um:

var result = (a < b) ? a + b : a - b;

Das zweite Beispiel schaut mit einem bedingten Operator wie folgt aus:

var result = (a < b) ? a + b : (a > b) ? a - b; a / b;