? :
Operator warunkowy (ternary) zwraca jedną z dwóch wartości zależnie od warunku, w jednym krótkim wyrażeniu.
- Zwraca
- Wartość
exprIfTrue, gdy warunek jest prawdziwy, w przeciwnym razie wartośćexprIfFalse. Obliczane jest tylko wybrane wyrażenie.
Przykład
#const points = 85
const isPremium = false
const result = points >= 50 ? 'Zaliczone' : 'Do poprawy'
console.log(result)
console.log(`Konto: ${isPremium ? 'Premium' : 'Darmowe'}`)Definicja i zastosowanie
#Operator warunkowy, nazywany też trójargumentowym, składa się z trzech części: warunku, wartości na wypadek prawdy i wartości na wypadek fałszu. Zapis warunek ? a : b zwraca a, gdy warunek jest prawdziwy (truthy), a w przeciwnym razie b.
W odróżnieniu od if...else to wyrażenie, a nie instrukcja. Możesz więc wstawić je bezpośrednio do przypisania, argumentu funkcji, szablonu tekstowego albo JSX w Reakcie, np. const label = points >= 50 ? "Zaliczone" : "Do poprawy".
Operatory można łączyć w łańcuch, żeby wybrać jedną z kilku wartości, ale przy więcej niż dwóch lub trzech poziomach kod traci czytelność. Wtedy lepiej sprawdzi się if...else, switch albo osobna funkcja.
Składnia
#condition ? exprIfTrue : exprIfFalseWięcej przykładów
#const medal = (place) =>
place === 1 ? 'złoty'
: place === 2 ? 'srebrny'
: place === 3 ? 'brązowy'
: 'brak'
console.log(medal(1))
console.log(medal(3))
console.log(medal(7))function reward() {
console.log('Przyznano nagrodę')
return 50
}
const finished = false
const bonus = finished ? reward() : 0
console.log(bonus)reward() nie zostało wywołane, bo warunek był fałszywy. Operator oblicza tylko jedną z dwóch gałęzi.
Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Używaj operatora do wyboru wartości, a nie do wywoływania akcji. Zapis
isValid ? save() : showError()czytelniej wygląda jakoif...else. - Jeśli chodzi tylko o wartość domyślną, krótsze są
??i||:name ?? "Gość". - Zagnieżdżone warunki formatuj w osobnych liniach, każdy wiersz zaczynając od
?lub:. Łatwiej wtedy zobaczyć, która wartość należy do którego warunku.
Powiązane hasła
#- if...elseWykonuje blok kodu tylko wtedy, gdy warunek jest prawdziwy, a w przeciwnym razie opcjonalny blok else.
- &&, ||, !Operatory logiczne I (&&), LUB (||) i NIE (!). Łączą warunki, a && i || zwracają jedną ze swoich stron.
- ??Operator ?? (nullish coalescing) zwraca prawą stronę tylko wtedy, gdy lewa to null lub undefined. Idealny do wartości domyślnych.
- switchPorównuje wartość z listą przypadków case i wykonuje kod od pierwszego pasującego.
- Template literalsSzablony tekstowe w odwróconych apostrofach: wstawiają wartości przez ${} i mogą zajmować wiele linii.
Widzisz błąd albo brakuje przykładu? Napisz do nas.