Instrukcja warunkowa if

Instrukcja warunkowa if pozwala wykonać pewien blok kodu tylko wtedy, gdy spełniony jest określony warunek. Wyobraź sobie, że program podejmuje decyzje: „jeśli zajdzie X, zrób Y, w przeciwnym razie zrób Z”.

Składnia

if (warunek) {
    // kod do wykonania, gdy warunek jest prawdziwy (true)
} else {
    // kod do wykonania, gdy warunek jest fałszywy (false)
}

else (czyli „w przeciwnym razie”) jest opcjonalne – dodajemy je, gdy chcemy wykonać alternatywny kod, jeśli warunek nie został spełniony. Możemy też łączyć wiele warunków za pomocą else if:

if (warunek1) {
    // kod gdy warunek1 jest true
} else if (warunek2) {
    // kod gdy warunek1 był false, ale warunek2 jest true
} else {
    // kod gdy żaden z powyższych warunków nie był spełniony
}

Porównania i operatory logiczne

Warunek w if-ie to najczęściej wyrażenie porównujące zmienne lub wartości. Do porównywania liczb czy stringów służą m.in.:

• === – porównanie równości (sprawdza, czy lewa i prawa strona są identyczne co do wartości i typu). Np. x === 5 jest true, gdy x jest równe 5.
• !== – porównanie różności (true, gdy wartości są różne). Np. x !== 0 jest true, jeśli x nie jest zerem.
• >, < – większe niż, mniejsze niż.
• >=, <= – większe bądź równe, mniejsze bądź równe.

Za pomocą tych operatorów możemy tworzyć warunki, np. wiek >= 18 (sprawdza, czy zmienna wiek jest co najmniej 18).

Możemy też łączyć warunki logiczne za pomocą operatorów:

• AND logiczne (&&) – zwraca true, jeśli oba warunki są spełnione. Np. x > 0 && x < 10 jest true tylko wtedy, gdy x jest jednocześnie większe od 0 i mniejsze od 10.
• OR logiczne (||) – zwraca true, jeśli przynajmniej jeden z warunków jest spełniony. Np. dzien === "sobota" || dzien === "niedziela" jest true dla soboty lub niedzieli.
• NOT (!) – odwraca wartość logiczną (true staje się false, false staje się true). Przykładowo, jeśli isLoggedIn jest false, to !isLoggedIn będzie true.

Uwaga: do porównywania używaj zawsze podwójnego/trójnego znaku równości (najlepiej === i !==). Pojedyncze = służy do przypisania wartości do zmiennej, a nie do porównania. Częsty błąd początkujących to napisanie if (x = 5) zamiast if (x === 5) – pierwsze przypisze zmiennej x wartość 5 i jako wyrażenie zwróci 5 (traktowane jako true), co prowadzi do trudnych do wykrycia błędów. Dlatego trzymajmy się === i !== dla pewności.

Przykłady

Przykład 1: Sprawdzanie wieku

let wiek = 20;
if (wiek >= 18) {
    console.log("Jesteś pełnoletni.");
} else {
    console.log("Jesteś niepełnoletni.");
}

W powyższym kodzie, jeśli zmienna wiek ma wartość 20 (lub inną większą bądź równą 18), warunek wiek >= 18 będzie prawdziwy i wykona się pierwsza gałąź. Jeśli wiek byłby np. 15, wykonałby się blok else.

Przykład 2: Hasło do logowania

let wpisaneHaslo = "abc123";
const prawidloweHaslo = "sekret";
if (wpisaneHaslo === prawidloweHaslo) {
    console.log("Hasło poprawne! Dostęp przyznany.");
} else {
    console.log("Błędne hasło. Spróbuj ponownie.");
}

Porównujemy dwie zmienne tekstowe. Pamiętaj, że porównywanie stringów rozróżnia wielkość liter – "Sekret" nie jest tym samym co "sekret".

Przykład 3: Status użytkownika

let isLoggedIn = false;  // czy użytkownik jest zalogowany
let isAdmin = true;      // czy użytkownik ma rolę administratora

if (!isLoggedIn) {
    console.log("Użytkownik niezalogowany - dostęp ograniczony.");
} else if (isAdmin) {
    console.log("Witaj, administratorze! Masz pełny dostęp.");
} else {
    console.log("Witaj, zwykły użytkowniku. Masz ograniczony dostęp.");
}

W pierwszym if sprawdzamy negację !isLoggedIn. Jeżeli użytkownik nie jest zalogowany, od razu wypisujemy komunikat o ograniczonym dostępie. Jeśli jest zalogowany, sprawdzamy dalej, czy jest administratorem, a w przeciwnym razie traktujemy go jako zwykłego użytkownika.

Ćwiczenia

1. Napisz skrypt, który na podstawie wartości zmiennej wiek wypisze w konsoli informację, czy osoba jest niepełnoletnia czy pełnoletnia (wykorzystaj if i else oraz porównanie wiek >= 18). Następnie zmień wartość zmiennej wiek i uruchom skrypt ponownie, aby sprawdzić oba przypadki.
2. Wyobraź sobie prosty system logowania. Zdefiniuj zmienną haslo i przypisz jej pewien tajny napis. Następnie utwórz warunek if, który porówna wprowadzone hasło (dla testu przypisz je po prostu do innej zmiennej, np. wpisaneHaslo) z tym tajnym hasłem. Jeśli są takie same, niech program wypisze „Logowanie powiodło się”, w przeciwnym razie „Niepoprawne hasło”. Zwróć uwagę na użycie operatora === do porównania tekstów.
3. Stwórz dwie zmienne logiczne: isStudent (czy użytkownik jest studentem) oraz isLoggedIn (czy jest zalogowany), przypisz im przykładowe wartości true lub false. Napisz warunek, który sprawdzi, czy oba warunki są prawdziwe (użyj operatora &&). Jeśli tak, niech wypisze w konsoli komunikat powitalny dla zalogowanego studenta. Jeśli nie, wypisz komunikat, że dostęp jest ograniczony (np. „Musisz być zalogowanym studentem, aby to zobaczyć”).
4. (Trudniejsze) Mając zmienną dzienTygodnia (np. "poniedziałek", "wtorek", ..., "niedziela"), napisz skrypt, który sprawdzi czy dany dzień jest weekendem. Wykorzystaj operator || – warunek będzie sprawdzał czy dzienTygodnia === "sobota" || dzienTygodnia === "niedziela". W zależności od wyniku wypisz odpowiednio „Weekend! Można odpocząć.” lub „Dzień roboczy. Do pracy!”.