if else w JavaScript: warunki, else if i operator trójargumentowy

Budowa instrukcji if

Instrukcja if wykonuje blok kodu tylko wtedy, gdy warunek jest prawdziwy. Składa się ze słowa kluczowego, warunku w nawiasach i bloku w nawiasach klamrowych:

const age = 21;

if (age >= 18) {
  console.log("Możesz głosować.");
}

Warunek age >= 18 daje true, więc blok się wykonuje. Gdyby age wynosiło 16, warunek dałby false i JavaScript całkowicie pominąłby blok.

Nawiasy klamrowe są technicznie opcjonalne, gdy blok zawiera jedną instrukcję, ale zawsze ich używaj. Instrukcje if bez klamer to klasyczne źródło błędów, gdy ktoś później dopisze drugą linię i zapomni, że wcale nie jest ona w bloku.

else: gałąź awaryjna

Połącz if z else, żeby wykonać inny kod, gdy warunek jest fałszywy:

const hour = 14;

if (hour < 12) {
  console.log("Dzień dobry");
} else {
  console.log("Miłego popołudnia");
}

Wykonuje się dokładnie jedna z dwóch gałęzi. Nigdy obie i nigdy żadna. else nie ma własnego warunku: łapie wszystko, gdy „if okazał się fałszywy”.

else if: wybór z kilku opcji

Gdy masz więcej niż dwa przypadki, połącz je w łańcuch przez else if. JavaScript sprawdza warunki po kolei i zatrzymuje się na pierwszym prawdziwym:

const score = 78;

if (score >= 90) {
  console.log("A");
} else if (score >= 80) {
  console.log("B");
} else if (score >= 70) {
  console.log("C");
} else if (score >= 60) {
  console.log("D");
} else {
  console.log("F");
}

Wykonuje się tylko jedna gałąź. Gdy warunek zostanie dopasowany, reszta jest pomijana, nawet jeśli też byłaby prawdziwa. Dlatego kolejność ma znaczenie: gdybyś odwrócił łańcuch i najpierw sprawdzał score >= 60, każdy powyżej 60 dostałby D.

Końcowe else jest opcjonalne, ale jego dodanie jasno pokazuje intencję: „jeśli nic innego nie pasowało, zrób to”.

Warunkiem może być dowolne wyrażenie

To, co stoi w nawiasach, nie musi być porównaniem. Może to być dowolne wyrażenie, a JavaScript zamieni wynik na wartość logiczną:

const name = "Ada";
const items = [];

if (name) {
  console.log("name jest ustawione");
}

if (items.length) {
  console.log("w koszyku są produkty");
} else {
  console.log("koszyk jest pusty");
}

Niepuste stringi są truthy. 0 i pusty string są falsy, więc items.length równe 0 kieruje do gałęzi else. To standardowy idiom JavaScript na sprawdzenie, czy „coś tam jest”.

Pełna lista wartości falsy jest krótka i warto ją zapamiętać: false, 0, -0, 0n, "", null, undefined i NaN. Wszystko inne jest truthy, łącznie z "0", "false", [] i {}. Na dwóch ostatnich ludzie często się łapią.

Łączenie warunków: && i ||

Używaj && (i) oraz || (lub), żeby łączyć warunki:

const age = 25;
const hasTicket = true;
const isVip = false;

if (age >= 18 && hasTicket) {
  console.log("Zapraszamy do środka");
}

if (isVip || age >= 65) {
  console.log("Wejście priorytetowe");
} else {
  console.log("Zwykła kolejka");
}

&& wymaga, żeby obie strony były truthy. || wymaga co najmniej jednej. Oba operatory działają na zasadzie short-circuit: && zatrzymuje się na pierwszej wartości falsy, || na pierwszej truthy. Ma to znaczenie, gdy drugi warunek ma efekt uboczny albo mógłby rzucić błąd: user && user.name bezpiecznie zwraca undefined, gdy user to null, zamiast wysadzić program.

Mieszaną logikę owijaj w nawiasy, żeby kolejność działań była oczywista:

const age = 20;
const isMember = true;
const hasPass = false;

if ((isMember || hasPass) && age >= 18) {
  console.log("Wstęp przyznany");
}

Bez nawiasów && wiąże mocniej niż ||, co zwykle jest odwrotnością tego, jak czyta się to naturalnie.

== kontra === (używaj ===)

Sprawdzając równość w if, używaj === i !==, a nie == i !=:

const input = "42";

if (input === 42) {
  console.log("ścisłe: pasuje do liczby");
} else {
  console.log("ścisłe: nie pasuje");
}

if (input == 42) {
  console.log("luźne: pasuje po konwersji typów");
}

== konwertuje typy przed porównaniem, co prowadzi do niespodzianek, takich jak "" == 0 dające true czy null == undefined dające true. === porównuje bez konwersji: ten sam typ i ta sama wartość. Domyślnie używaj ===. Jedynym popularnym wyjątkiem jest x == null, które za jednym razem sprawdza i null, i undefined.

Operator trójargumentowy

Do wyboru między dwiema wartościami operator trójargumentowy condition ? a : b jest często czytelniejszy niż pełne if/else:

const age = 17;

const label = age >= 18 ? "dorosły" : "niepełnoletni";
console.log(label);

function greeting(hour) {
  return hour < 12 ? "Dzień dobry" : "Miłego popołudnia";
}

console.log(greeting(9));
console.log(greeting(20));

Operator trójargumentowy to wyrażenie: daje wartość. To kluczowa różnica wobec if/else, które jest instrukcją. Używaj go, gdy potrzebujesz wyniku (przypisanie zmiennej, return, budowanie stringa). Używaj if/else, gdy wykonujesz efekty uboczne.

Możesz łączyć operatory trójargumentowe w łańcuch, ale czytelność leci wtedy na łeb na szyję:

// Nie rób tak:
const grade = score >= 90 ? "A" : score >= 80 ? "B" : score >= 70 ? "C" : "F";

Jeśli zaczynasz je łączyć, wróć do else if.

Zagnieżdżony if kontra płaskie else if

Czasem jeden warunek ma sens tylko wewnątrz innego. Zagnieżdżenie jest wtedy w porządku:

const user = { loggedIn: true, role: "admin" };

if (user.loggedIn) {
  if (user.role === "admin") {
    console.log("Pokaż panel admina");
  } else {
    console.log("Pokaż panel użytkownika");
  }
} else {
  console.log("Przekieruj do logowania");
}

Ale zagnieżdżenie na trzy lub cztery poziomy to sygnał, że z kodem coś jest nie tak. Spłaszcz go wczesnymi returnami albo połączonym warunkiem:

function describe(user) {
  if (!user.loggedIn) return "Przekieruj do logowania";
  if (user.role === "admin") return "Pokaż panel admina";
  return "Pokaż panel użytkownika";
}

console.log(describe({ loggedIn: true, role: "admin" }));
console.log(describe({ loggedIn: false }));

Wczesne returny sprawiają, że każda gałąź jest krótka i na tym samym poziomie wcięcia. Dużo łatwiej to przejrzeć niż piramidę zagnieżdżonych ifów.

Częsta pułapka: przypisanie w if

= przypisuje. === porównuje. Pomylenie ich w warunku to klasyczny błąd:

let status = "pending";

// Błąd: to przypisuje, a nie porównuje.
if (status = "done") {
  console.log("To wykonuje się zawsze");
}

console.log("status teraz:", status);

status = "done" przypisuje "done" do status i daje wartość "done", która jest truthy. Blok wykonuje się więc zawsze, a ty po cichu nadpisujesz zmienną. Lintery to wyłapują. Tryb ścisły nie. Po prostu uważaj i używaj ===, gdy chcesz porównać.

Dalej: switch

Gdy porównujesz jedną wartość z wieloma możliwymi dopasowaniami, długi łańcuch else if zaczyna się powtarzać. Instrukcja switch w JavaScript powstała dokładnie do takich przypadków i ma własne dziwactwa związane z break i przechodzeniem do kolejnych przypadków (fall-through). O niej za chwilę.