Fragezeichen ? - Ternary-Operator

Der ?: Operator (Ternary- oder Dreifach-Operator mit dem Fragezeichen) ist eine kompakte Schreibweise für eine bedingte Zuweisung, wenn if-else zu umständlich wird. Auch wenn der ?-Operator als kurze if-then-Anweisung eingesetzt wird: Der Ternary-Operator ist nur eine bedingte Zuweisung eines Werts an eine Variable, if-then-else hingegen ist Flußkontrolle.

Javascript Ternary: Bedingte Zuweisung oder Bedingter Operator

Ein, zwei oder drei Operatoren

Javascript Operationen agieren mit Operatoren. Die wichtigsten sind +, -, /, =, * und %. Operatoren lassen sich drei Typen zuordnen:

Unäre (Unary) Operatoren, auch einstellige Verknüpfung
Ein Operand vor oder nach dem Operator
Verneinung oder Negation: !n, x++ (1 addieren)
Zweistellige (Binary) Operatoren
Zwei Operatoren: einer vor und einer nach dem Operator
Addition a + b, Division a / b
Dreifach (Ternary) Operatoren
Drei Operatoren, Kurzform einer if-then-else Abfrage
t = alter < 16 ? "10€" : "50€"

Ternary wird bei einfachen if else Bedingungen eingesetzt, wenn das Ergebnis der Bedingung true oder false ist.

const alter = 15;
if (alter >= 16) {
	console.log (alter, "Film freigegeben");
} else {
	console.log (alter, "Schau lieber die Sendung mit der Maus");
}

// [Log] 15 – "Schau lieber die Sendung mit der Maus" 

Anstelle der langatmigen if-else-Anweisung tritt die bedingte Zuweisung. Der erste Operand ist die Bedingung, der zweite Operand wird zurückgegeben, wenn die Bedingung true liefert und der dritte Operand wird zurückgegeben, wenn die Bedingung false liefert.

            Operand 1    Operand 2   Operand 3
               |            |           |
let foo = (Bedingung) ? wenn true : wenn false;

Bevor man die Ternary-Schreibweise wirklich intus hat, kann man den Ausdruck übersichtlich strukturieren:

const foo = 
	alter >= 16 
	? console.log (alter, "Film freigegeben") 
	: console.log (alter, "Schau lieber die Sendung mit der Maus");

Das Ergebnis der Bedingung – im Beispiel alter >= 16 – sollte true oder false sein, Rückgabe ist entweder der String "Film freigegeben" oder "Schau lieber die Sendung mit der Maus".

Beispiel für Ternary

Anstelle von

let member = document.getElementsByName("member");
let ticket;
for (let i=0; i<2; i++) {
   member[i].onclick = function () {
      if (this.value === "1") {
         ticket = "€ 10";
      } else {
         ticket = "€ 50";
      }
   }
}

reicht eine Zeile:

                     +-- Bedingung
                     |
ticket = (this.value === "1") ? "€ 10" : "€ 50";
                                   ▲        ▲
             Bedingung trifft zu ──┘        │
                                            │
                  Bindung trifft nicht zu ──┘

Das liest sich: Wenn Mitglied gewählt ist, kostet das Ticket € 10, wenn nicht, € 50. Ternary spart bei einfachen if…else-Anweisungen ein paar Zeilen und das Erzeugen einer neuen Variablen.

Ternary sinnvoll oder nicht sinnvoll?

Die einen sagen, Ternary anstelle von if then else trägt zur Übersichtlichkeit und Lesbarkeit des Skriptcodes bei, weil Anweisungen in einer Zeile besser nachvollziehbar sind. Die anderen sagen, if-else-Statements sind leichter zu lesen und liefern beim Kompilieren den effizienteren Code.

Sinnvoll ist Ternary u.U. in einfachen Booleschen Abfragen, in denen er ein oder zwei Zeilen Scriptcode einspart. Da sind wir auf einem homöopathischen Level der Optimierung.

Suchen auf mediaevent.de