Buď tohle, nebo tamto

Stránka často ukazuje buď jedno, nebo druhé: vstupenka je zdarma, nebo má cenu, večer je zahajovací, nebo závěrečný. S if a else byste potřebovali proměnnou:

let popisek;
if (kapela.den === "pátek") {
    popisek = "Zahajovací večer";
} else {
    popisek = "Závěrečný večer";
}

JavaScript má na to kratší zápis, podmíněný operátor:

const popisek = kapela.den === "pátek" ? "Zahajovací večer" : "Závěrečný večer";

Čtěte ho jako otázku: platí kapela.den === "pátek"? Když ano, je výsledkem hodnota za ?, jinak hodnota za :. Má tři části, a proto se mu říká i ternární operátor. A na rozdíl od if je to výraz: dává hodnotu. Smí tedy i tam, kam if nesmí, do složených závorek v JSX:

<p>{kapela.den === "pátek" ? "Zahajovací večer" : "Závěrečný večer"}</p>

Umí vybrat i hodnotu atributu, třeba třídy prvku. className může obsahovat víc tříd oddělených mezerou:

<article className={kapela.podium === "Hlavní pódium" ? "karta velka" : "karta"}>

A umí vybrat i mezi dvěma prvky: {kapela.hlavniHvezda ? <strong>{kapela.nazev}</strong> : kapela.nazev}. Hodí se na krátké volby mezi dvěma hodnotami. Když je v každé větvi několik řádků JSX, čte se líp if s předčasným návratem.

Typická chyba je vynechat část za :. Podmíněný operátor potřebuje vždycky obě hodnoty. Na „tohle, nebo nic“ je kratší zápis a ten přijde v dalším cvičení.