Każdy program musi reagować. Użytkownik klika przycisk. API zwraca dane. Pole formularza staje się puste. Bez sposobu na rozga...

Każdy program musi reagować. Użytkownik klika przycisk. API zwraca dane. Pole formularza staje się puste. Bez możliwości rozgałęziania, Twój kod działałby linijka po linijce, niezależnie od tego, co się faktycznie dzieje. Instrukcje warunkowe dają JavaScriptowi zdolność dokonywania wyborów. Są one decydentami wewnątrz Twoich funkcji, strażnikami decydującymi o tym, co zostanie wykonane, a co pominięte. Gdy zrozumiesz, jak dobrze je pisać, przestaniesz tworzyć sztywne skrypty i zaczniesz budować oprogramowanie, które faktycznie odpowiada na działania.

Dlaczego instrukcje warunkowe są ważne

Przepływ sterowania (control flow) to kręgosłup logiki. Używasz instrukcji warunkowych, aby walidować hasła przed wysłaniem ich na serwer. Sprawdzasz, czy koszyk zakupowy jest pusty, zanim obliczysz podatek. Wykrywasz, czy żądanie sieciowe zakończyło się niepowodzeniem, aby wyświetlić błąd zamiast pustego ekranu. Wszystkie te scenariusze opierają się na tej samej prostej idei: oceń coś, a następnie postąp odpowiednio.

Bez instrukcji warunkowych Twoja aplikacja byłaby monologiem, a nie rozmową. Nie mogłaby obsługiwać różnych scenariuszy danych, elegancko zarządzać błędami ani w żaden istotny sposób reagować na działania użytkownika. Pozwalają one kontrolować, jak program działa w warunkach niepewności rzeczywistego świata.

Podstawowa instrukcja if

Najprostszym miejscem na start jest samodzielne if. Mówi ono: jeśli to jest prawdą, wykonaj tę czynność. To wszystko. Brak opcji zapasowej, brak alternatywnej ścieżki.

if (x % 2 === 0) {
    console.log("Even");
}

W tym fragmencie operator modulo sprawdza, czy x dzieli się przez dwa bez reszty. Gdy reszta wynosi zero, konsola wypisuje ciąg znaków. Jeśli x jest nieparzyste, nic się nie dzieje. Blok jest ignorowany, a wykonanie toczy się dalej.

To ciche ignorowanie jest ważne. Czasami chcesz jedynie zabezpieczyć pojedynczą czynność. Być może chcesz dodać klasę CSS do przycisku tylko wtedy, gdy jest on aktywny, lub dodać element do tablicy tylko wtedy, gdy pole wejściowe nie jest puste. Sama instrukcja if obsługuje takie momenty, nie zmuszając Cię do pisania zbędnej logiki.

Dodawanie alternatywy za pomocą if-else

Prawdziwe decyzje zazwyczaj mają dwie strony. Albo użytkownik jest wystarczająco stary, albo nie. Albo płatność się powiodła, albo zakończyła się niepowodzeniem. Struktura if-else obejmuje oba przypadki.

if (age >= 18) {
    console.log("Adult");
} else {
    console.log("Not an Adult");
}

Blok else przechwytuje wszystko, co zostało odrzucone przez pierwszy warunek. Tworzy on czystą, binarną rozgałęźkę. Ten wzorzec dobrze sprawdza się przy przełącznikach (toggles), uprawnieniach i flagach funkcji (feature flags). Dbaj o to, aby logika wewnątrz każdego bloku była skoncentrowana. Jeśli zauważysz, że nakładasz zbyt wiele zadań na jedną gałąź, jest to zazwyczaj sygnał, że należy podzielić pracę na mniejsze funkcje.

Sprawdzanie wielu ścieżek za pomocą else if

Życie rzadko oferuje tylko dwa wybory. Możesz potrzebować skategoryzować liczbę jako dodatnią, ujemną lub zero. Możesz przypisać stawkę za wysyłkę na podstawie przedziałów wagowych. Do uporządkowanych, wielokrotnych porównań użyj else if.

if (x > 0) {
    console.log("Positive");
} else if (x < 0) {
    console.log("Negative");
} else {
    console.log("Zero");
}

JavaScript ocenia je od góry do dołu. Gdy tylko jeden warunek zostanie spełniony, wykonuje ten blok i ignoruje resztę. Kolejność ma znaczenie. Gdybyś sprawdził x > 0 po sprawdzeniu x > 100, bardziej rygorystyczne sprawdzenie nigdy by się nie wykonało, ponieważ mniej rygorystyczne przechwyciłoby je jako pierwsze. Myśl o else if jak o liście priorytetów.

Instrukcja switch

Kiedy porównujesz jedną wartość z wieloma rozłącznymi opcjami, długi ciąg instrukcji else if może wydawać się powtarzalny. Instrukcja switch porządkuje to. Dopasowuje ona wyrażenie do klauzul case i wykonuje pasujący blok.

switch (true) {
    case marks >= 90:
        Branch = "Computer science";
        break;
    case marks >= 80:
        Branch = "Mechanical";
        break;
    default:
        Branch = "Other";
}

Ten przykład używa switch(true), aby bezpośrednio oceniać warunki logiczne (boolean), co jest powszechnym wzorcem w JavaScript, gdy logika opiera się na zakresach, a nie na dokładnej równości. Słowo kluczowe break jest niezbędne. Bez niego wykonanie przejdzie do następnego przypadku (case), niezależnie od tego, czy pasuje, co rzadko jest pożądanym zachowaniem. Klauzula default działa jak końcowe else, przechwytując wszystko, co nie pasowało do wcześniejszych przypadków.

switch błyszczy, gdy masz jasne, stałe opcje. Często łatwiej go przeskanować wzrokiem niż wysoką stertę bloków else if, zwłaszcza gdy każda gałąź po prostu przypisuje wartość lub wywołuje pojedynczą funkcję.

Operator trójargumentowy (ternarny)

W przypadku krótkich, binarnych decyzji operator trójargumentowy pozwala zachować zwięzłość. Przyjmuje on trzy operandy: warunek, wartość, jeśli jest prawdziwy, oraz wartość, jeśli jest fałszywy.

const result = (age >= 18) ? "Eligible" : "Not eligible";

Możesz go używać do szybkich przypisań lub zwracania wartości w jednej linii (inline returns). Dobrze sprawdza się, gdy wynikiem jest proste wyrażenie. Powstrzymaj się od pokusy zagnieżdżania operatorów trójargumentowych na trzy poziomy głęboko. Zagnieżdżony operator może zaoszczędzić linie kodu, ale odbywa się to kosztem czytelności. Gdy Twoja logika rośnie, blok if-else jest zazwyczaj bardziej przyjazny dla kolejnego programisty, który otworzy ten plik.

Zagnieżdżone decyzje

Złożona logika czasami wymaga zadawania pytań uzupełniających. Możesz zagnieździć instrukcję if wewnątrz innej instrukcji if, aby doprecyzować decyzję.

if (weather === "sunny") {
    if (temp > 30) {
        console.log("