Operator ternarny w JavaScript - składnia i praktyczne przykłady

Gdy w kodzie trzeba wybrać jedną z dwóch wartości, rozbudowane if...else często zajmuje więcej miejsca, niż naprawdę potrzeba. Operator warunkowy w JavaScript pozwala zapisać taką decyzję w jednej, czytelnej instrukcji, ale tylko wtedy, gdy dobrze rozumiesz jego składnię, kolejność działania i ograniczenia. Pokażę praktyczne przykłady, porównam go z if...else i wyjaśnię błędy, przez które krótki zapis szybko staje się nieczytelny.

Co robi operator warunkowy w JavaScript

Operator ternarny to skrócona forma wyboru jednej z dwóch wartości. Jego pełna nazwa to operator warunkowy, a określenie „ternarny” wynika z tego, że wykorzystuje trzy operandy, czyli trzy elementy uczestniczące w działaniu.

const komunikat = wiek >= 18 ? "Osoba pełnoletnia" : "Osoba niepełnoletnia";

JavaScript najpierw sprawdza warunek wiek >= 18. Gdy jego wynik jest prawdziwy, przypisuje tekst "Osoba pełnoletnia". W przeciwnym razie wybiera drugą wartość. W praktyce otrzymujemy jedną wartość wynikową, a nie samą konstrukcję sterującą.

To odróżnia operator warunkowy od if, który jest instrukcją. Dzięki temu można umieścić go bezpośrednio w wyrażeniu, na przykład podczas tworzenia obiektu, zwracania wyniku funkcji albo budowania tekstu. Ta różnica jest szczególnie przydatna w kodzie interfejsów użytkownika.

Składnia i kolejność działania krok po kroku

Podstawowy wzór wygląda tak:

warunek ? wartośćGdyPrawda : wartośćGdyFałsz

Znak zapytania oddziela warunek od pierwszego wyniku, a dwukropek rozdziela wynik dla prawdy od wyniku dla fałszu. Sam zapis przypomina krótkie pytanie. Jeśli odpowiedź brzmi „tak”, JavaScript wybiera część po znaku zapytania, a jeśli „nie”, część po dwukropku.

const liczba = 7;
const typ = liczba % 2 === 0 ? "parzysta" : "nieparzysta";

console.log(typ); // "nieparzysta"

Warunek nie musi zwracać dosłownie wartości true albo false. JavaScript ocenia jego prawdziwość logiczną. Wartości takie jak false, 0, "", null, undefined i NaN są traktowane jako fałszywe. Pozostałe wartości, w tym niepuste tablice i obiekty, zwykle przechodzą jako prawdziwe.

const nazwaUzytkownika = "";
const etykieta = nazwaUzytkownika ? nazwaUzytkownika : "Gość";

console.log(etykieta); // "Gość"

W tym miejscu początkujący często zakładają, że pusta tablica jest fałszywa. Nie jest. Dlatego warunek lista ? ... : ... nie sprawdza, czy lista ma elementy. Do tego lepiej użyć lista.length > 0, bo wtedy intencja kodu jest jasna.

Najbardziej praktyczne zastosowania w codziennym kodzie

Najprostsze zastosowanie to przypisanie jednej z dwóch wartości. Sam korzystam z takiego zapisu przede wszystkim przy etykietach, klasach CSS, komunikatach i prostych ustawieniach widoku. W takich miejscach operator skraca kod, ale nadal pozostawia logikę łatwą do odczytania.

const przyciskTekst = zapisano ? "Zapisano" : "Zapisz";
const klasa = aktywna ? "menu-item active" : "menu-item";

Można go również użyć w instrukcji return. To dobry wybór, gdy funkcja ma zwrócić jeden z dwóch prostych wyników i nie wykonuje po drodze kilku dodatkowych operacji.

function pobierzStatus(isOnline) {
  return isOnline ? "online" : "offline";
}

Operator dobrze sprawdza się także przy wartości domyślnej zależnej od warunku biznesowego. Trzeba jednak odróżnić go od operatora ??. Ternary pozwala sprawdzić dowolny warunek, natomiast ?? reaguje wyłącznie na null i undefined.

const nazwa = uzytkownik.imie ?? "Nieznany użytkownik";
const status = uzytkownik.aktywny ? "Aktywny" : "Nieaktywny";

W aplikacjach frontendowych często spotkasz go przy renderowaniu fragmentu interfejsu. W zależności od biblioteki wynik może być tekstem, komponentem albo wartością null. Sama zasada pozostaje taka sama, czyli jedna decyzja i dwa możliwe rezultaty.

Operator ternarny a if...else

Obie konstrukcje mogą rozwiązać podobny problem, ale nie są wymienne w każdej sytuacji. if...else lepiej opisuje serię działań, a operator warunkowy pasuje do wyboru wartości. Gdy kod zaczyna wykonywać kilka instrukcji w każdej gałęzi, skrócenie zwykle przestaje być zaletą.

Przykład z operatorem jest krótki:

const wynik = punkty >= 50 ? "zaliczono" : "nie zaliczono";

Natomiast gdy trzeba zmienić kilka zmiennych, wyświetlić ostrzeżenie i zapisać dane, lepiej użyć klasycznej instrukcji. Krótki kod nie zawsze jest dobrym kodem. Dla mnie najważniejszym testem jest to, czy inna osoba zrozumie warunek bez rozplątywania go w głowie.

Zagnieżdżenia i częste błędy

JavaScript pozwala łączyć operatory ternarne, ale zagnieżdżenia należy stosować ostrożnie. Jeden dodatkowy poziom bywa jeszcze akceptowalny, natomiast trzy lub cztery warunki w jednej linii stają się trudne do debugowania i łatwo pomylić kolejność wyników.

const ocena = wynik >= 90
  ? "bardzo dobry"
  : wynik >= 75
    ? "dobry"
    : "wymaga poprawy";

Lepszy zapis wielowierszowy nie naprawia problemu całkowicie. Jeśli decyzji jest więcej, czytelniejszy będzie if...else if...else albo osobna funkcja. Czasem warto też użyć obiektu mapującego wartości, zwłaszcza gdy wybór nie zależy od zakresów, tylko od konkretnych kluczy.

Najczęstszy błąd składniowy to brak dwukropka albo pomieszanie kolejności gałęzi:

// Poprawnie
const dostep = zalogowany ? "Panel użytkownika" : "Logowanie";

// Błędna intuicja
const dostep = zalogowany ? "Logowanie" : "Panel użytkownika";

Sam operator jest poprawny w obu przykładach, ale drugi może zwracać odwrotny rezultat niż zakładamy. Dlatego przed zapisaniem kodu dobrze przeczytać go dosłownie jako „jeśli zalogowany, to..., w przeciwnym razie...”.

Uważaj też na mieszanie operatora warunkowego z przypisaniem i operatorami logicznymi. Nawiasy często poprawiają czytelność, nawet gdy nie są formalnie wymagane.

const komunikat = (maKonto && aktywne) ? "Możesz kontynuować" : "Brak dostępu";

Nie używałbym operatora ternarnego do efektów ubocznych, takich jak wywoływanie kilku funkcji zależnie od warunku. Taki zapis może działać, ale zwykle ukrywa intencję i utrudnia późniejsze zmiany.

Jak pisać go czytelnie i bez przesady

Dobra zasada jest prosta. Użyj operatora warunkowego, gdy masz jeden warunek, dwa wyniki i krótkie wyrażenia. Gdy trzeba dopisać komentarz, aby wyjaśnić, co robi linia, prawdopodobnie lepiej rozbić ją na kilka instrukcji.

• Stosuj go przy prostym przypisaniu lub zwracaniu wartości.
• Rozdzielaj długie warunki na osobną zmienną o opisowej nazwie.
• Unikaj wywołań funkcji z efektami ubocznymi w obu gałęziach.
• Nie twórz wielopoziomowych zagnieżdżeń tylko po to, aby zaoszczędzić linie kodu.
• W razie wątpliwości wybierz zapis, który łatwiej przetestować i zmienić.

Zamiast tego:

const tekst = user && user.settings && user.settings.darkMode
  ? user.settings.label || "Tryb ciemny"
  : "Tryb jasny";

lepiej wcześniej nazwać warunek:

const maTrybCiemny = Boolean(
  user?.settings?.darkMode
);

const tekst = maTrybCiemny
  ? user.settings.label || "Tryb ciemny"
  : "Tryb jasny";

Taki kod zajmuje kilka znaków więcej, ale jego sens widać od razu. W nowoczesnym JavaScript warto połączyć operator warunkowy z optional chaining, czyli składnią ?., która pozwala bezpiecznie odczytywać właściwości z potencjalnie pustych obiektów. Nie zastępuje ona ternary, ale często sprawia, że warunek jest krótszy i bezpieczniejszy.

Mała konstrukcja, duża różnica w jakości kodu

Operator warunkowy nie służy do pisania całej logiki aplikacji w jednej linii. Jego siła polega na czymś skromniejszym, ale bardzo praktycznym: pozwala elegancko wyrazić prosty wybór wartości bez tworzenia pełnego bloku instrukcji.

Przy nauce JavaScript warto ćwiczyć trzy rzeczy. Najpierw rozpoznawaj, która część jest warunkiem, potem sprawdzaj, co dzieje się dla wartości prawdziwej i fałszywej, a na końcu oceń, czy zapis nadal jest czytelny po kilku miesiącach. Jeśli odpowiedź na ostatnie pytanie brzmi „tak”, operator ternarny prawdopodobnie został użyty we właściwym miejscu.