Dies oder das

Eine Seite zeigt oft entweder das eine oder das andere: Ein Ticket ist kostenlos oder hat einen Preis, ein Abend ist der Eröffnungsabend oder der Abschlussabend. Mit if und else bräuchtest du eine Variable:

let beschriftung;
if (band.tag === "Freitag") {
    beschriftung = "Eröffnungsabend";
} else {
    beschriftung = "Abschlussabend";
}

JavaScript kennt eine kürzere Schreibweise dafür, den Bedingungsoperator:

const beschriftung = band.tag === "Freitag" ? "Eröffnungsabend" : "Abschlussabend";

Lies ihn wie eine Frage: Ist band.tag === "Freitag"? Wenn ja, ist das Ergebnis der Wert nach dem ?, sonst der Wert nach dem :. Er hat drei Teile und heißt deshalb auch ternärer Operator. Und anders als if ist er ein Ausdruck: Er ergibt einen Wert. Er kann also dort stehen, wo if nicht darf, nämlich in den geschweiften Klammern von JSX:

<p>{band.tag === "Freitag" ? "Eröffnungsabend" : "Abschlussabend"}</p>

Auch ein Attribut kann er auswählen, zum Beispiel die Klassen eines Elements. className kann mehrere Klassen enthalten, durch Leerzeichen getrennt:

<article className={band.buehne === "Hauptbühne" ? "karte gross" : "karte"}>

Und er kann zwischen zwei Elementen wählen: {band.headliner ? <strong>{band.name}</strong> : band.name}. Er eignet sich für kurze Entscheidungen zwischen zwei Werten. Besteht jeder Zweig aus mehreren Zeilen JSX, ist ein if mit frühem Return besser zu lesen.

Ein typischer Fehler ist, den Teil nach dem : wegzulassen. Der Bedingungsoperator braucht immer beide Werte. Für „dies oder nichts“ gibt es eine kürzere Schreibweise, sie kommt in der nächsten Übung.