?- oder Ternary-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:

tour.finished = 
	tour.walked > 10 
	? "Tour erfolgreich bewältigt" 
	: "noch nicht weit genug gelaufen";

Das Ergebnis der Bedingung – im Beispiel tour.walked > 10 – sollte true oder false sein, Rückgabe ist entweder der String "Tour erfolgreich bewältigt" oder "noch nicht weit genug gelaufen".

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.