Porównania i instrukcje warunkowe

Program, który zawsze robi to samo, nie jest zbyt użyteczny. Prawdziwe skrypty podejmują decyzje: czy rabat się należy, czy hasła są zgodne, czy numer paliwa to 1 czy 2. W JavaScripcie decyzje podejmujesz porównaniami (dają true albo false) i instrukcjami warunkowymi (if, ?:, switch), które wybierają, który fragment kodu się wykona. To najczęściej sprawdzany temat w części pisemnej INF.03 i obecny w połowie zadań praktycznych – warto go opanować dokładnie.

Porównania dają true albo false

Operator porównania bierze dwie wartości i zwraca wartość logiczną (boolean). Taką wartość możesz wypisać, zapisać w zmiennej albo – najczęściej – wstawić do if.

let a = 10;
let b = "10";
console.log(a == b, a === b, a != b, a !== b);

const punkty = 50;
console.log(punkty > 40);     // true
console.log(punkty >= 50);    // true – „co najmniej 50” to >=, nie >
console.log(punkty === 50);   // true
console.log(punkty === "50"); // false – liczba to nie napis
console.log(punkty == "50");  // true – == najpierw ujednolica typy
console.log("Słoń".toLowerCase() === "słoń"); // true – wynik porównania, nie napis

Ostatnia linia to przykład z informatora CKE: document.write(word.toLowerCase() == 'słoń') wyświetla true, bo wypisujemy wynik porównania, a nie napis.

== czy ===?

== („luźna równość”) przed porównaniem próbuje sprowadzić obie strony do tego samego typu. Reguły są zaskakujące: 0 == "" to true, "" == false to true, null == undefined to true. === („ścisła równość”) nie konwertuje nic – różne typy oznaczają false. W swoim kodzie używaj === i !==; == musisz tylko umieć czytać, bo w arkuszach egzaminacyjnych jest wszędzie.

console.log(0 == "");          // true – zaskakujące
console.log(0 === "");         // false – przewidywalne
console.log(null == undefined);  // true
console.log(null === undefined); // false
console.log("2" > "12");       // true! dwa napisy porównują się jak w słowniku ("2" > "1")
console.log(2 > "12");         // false – liczba z napisem: napis zamienia się w liczbę

Co jest „prawdą” w if?

W if (…) możesz wstawić dowolną wartość, nie tylko boolean. JavaScript sam zamienia ją na true lub false. Tylko kilka wartości daje false – nazywamy je falsy: false, 0, "" (pusty napis), null, undefined, NaN (oraz rzadko spotykane -0 i 0n). Wszystko inne jest truthy, w tym napis "0", napis "false" i każda niepusta tablica.

const imie = "";
if (imie) {
  console.log("Witaj,", imie);
} else {
  console.log("Nie podano imienia"); // pusty napis jest falsy
}
console.log(Boolean("0"), Boolean(0), Boolean("false")); // true false true

To wygodne przy sprawdzaniu, czy pole formularza jest puste (if (pole.value)), ale bywa pułapką: if (liczbaSztuk) odrzuci też poprawne zero.

if, else if, else

Instrukcja if wykonuje blok w klamrach, gdy warunek jest prawdziwy. else dodaje blok „w przeciwnym razie”, a else if – kolejny warunek sprawdzany tylko wtedy, gdy poprzednie zawiodły.

const procent = 72;
let ocena;

if (procent >= 90) {
  ocena = "celujący";
} else if (procent >= 75) {
  ocena = "bardzo dobry";
} else if (procent >= 50) {
  ocena = "dostateczny";
} else {
  ocena = "niedostateczny";
}
console.log(`${procent}% → ${ocena}`);

Zwróć uwagę na kolejność. Warunki są sprawdzane od góry, a wykonuje się pierwszy pasujący. Gdyby procent >= 50 stało na początku, 72 % i 95 % dostałyby „dostateczny”. Przy zakresach układaj progi od największego do najmniejszego (albo od najmniejszego z <), nigdy na przemian.

var wiek = 17;
if (wiek >= 18) document.write("dorosły");
else if (wiek >= 13) document.write("nastolatek");
else document.write("dziecko");

Operatory logiczne: &&, ||, !

Pojedyncze porównanie rzadko wystarcza. Warunki łączysz trzema operatorami:

Tabela prawdy do zapamiętania:

const zakupy = 250;
const kolor = "zielony";

console.log(zakupy > 200 && kolor === "zielony");  // true && true  → true
console.log(zakupy > 300 || kolor === "zielony");  // false || true → true
console.log(!(zakupy > 200));                      // !true → false

Nawiasy: && wiąże silniej niż ||

Tak jak mnożenie wykonuje się przed dodawaniem, tak && wykonuje się przed ||. Zapis a || b && c znaczy a || (b && c). Jeśli chcesz najpierw „lub”, musisz dać nawiasy. To sedno najczęstszego pytania w części pisemnej.

Zadanie w stylu CKE: „Rabat przysługuje, gdy wartość zakupów przekracza 200 zł i sweter jest zielony lub niebieski”.

function czyRabat(zakupy, kolor) {
  return zakupy > 200 && (kolor === "zielony" || kolor === "niebieski");
}
console.log(czyRabat(250, "zielony"));    // true  – spełnione oba
console.log(czyRabat(250, "czerwony"));   // false – zły kolor
console.log(czyRabat(150, "niebieski"));  // false – za mało zakupów

// Bez nawiasów znaczenie się zmienia: (zakupy > 200 && zielony) || niebieski
function zleBezNawiasow(zakupy, kolor) {
  return zakupy > 200 && kolor === "zielony" || kolor === "niebieski";
}
console.log(zleBezNawiasow(150, "niebieski")); // true – rabat za 150 zł! błąd

Od zdania do warunku

Na egzaminie dostajesz zdanie po polsku i cztery wyrażenia. Tłumacz słowo po słowie:

Leniwe obliczanie

&& i || przestają sprawdzać, gdy znają wynik. false && cokolwiek nie oblicza prawej strony; true || cokolwiek też nie. Dlatego bezpieczny jest zapis if (tab !== null && tab.length > 0) – gdy tab jest null, prawa strona nigdy się nie wykona i nie będzie błędu.

Operator warunkowy ?:

Gdy w zależności od warunku chcesz wybrać wartość (a nie wykonać kilka instrukcji), wygodniejszy od if/else jest operator warunkowy, zwany też trójargumentowym: warunek ? wartośćGdyTrue : wartośćGdyFalse.

const temperatura = 3;
const komunikat = temperatura > 0 ? "plus" : "mróz";
console.log(komunikat);

const sztuk = 1;
const koncowka = sztuk === 1 ? "sztuka" : "sztuk";
console.log(`${sztuk} ${koncowka}`);

// To samo przez if/else – dłużej:
let koncowka2;
if (sztuk === 1) {
  koncowka2 = "sztuka";
} else {
  koncowka2 = "sztuk";
}
console.log(koncowka === koncowka2); // true – obie wersje są równoważne

Zasada: ?: do jednej wartości w jednej linii. Zagnieżdżone a ? b : c ? d : e da się napisać, ale jest nieczytelne – wtedy wracaj do if/else if.

switch: wiele wariantów jednej wartości

Gdy sprawdzasz jedną zmienną wobec kilku konkretnych wartości („1 → benzyna, 2 → diesel, 3 → LPG”), czytelny jest switch. Każdy case kończ instrukcją break, inaczej wykonanie „przelewa się” do następnego przypadku. default łapie wszystko, co nie pasowało.

const dzien = 6;
let nazwa;

switch (dzien) {
  case 1:
    nazwa = "poniedziałek";
    break;
  case 6:
  case 7:                 // dwa przypadki, jedna akcja – celowe „przelanie”
    nazwa = "weekend";
    break;
  default:
    nazwa = "dzień roboczy";
}
console.log(nazwa); // weekend

Kiedy co wybrać: switch – jedna zmienna, kilka konkretnych wartości; if/else if – zakresy (>=), warunki złożone, różne zmienne; ?: – wybór jednej z dwóch wartości.

Zagnieżdżanie warunków

if może być w środku innego if. Działa, ale szybko robi się nieczytelne. Często zagnieżdżenie zamienisz na &&, a „sprawdź i wyjdź” załatwisz wcześnie – np. w funkcji przez return (lekcja Funkcje).

const wiek = 16;
const zgodaRodzica = true;

// wersja zagnieżdżona
if (wiek < 18) {
  if (zgodaRodzica) {
    console.log("Udział dozwolony (zgoda rodzica)");
  } else {
    console.log("Brak zgody rodzica");
  }
} else {
  console.log("Udział dozwolony (pełnoletni)");
}

// wersja płaska – to samo znaczenie
if (wiek >= 18 || zgodaRodzica) {
  console.log("Udział dozwolony");
} else {
  console.log("Brak zgody rodzica");
}

Zapowiedź: warunek w przeglądarce

DOM poznasz od lekcji Model DOM, ale zobacz już teraz, jak if steruje stroną. Kliknij przycisk i podaj kwotę.

<button id="sprawdz">Sprawdź rabat</button>
<p id="wynik">Kliknij, aby sprawdzić.</p>

const przycisk = document.getElementById('sprawdz');
const akapit = document.getElementById('wynik');

przycisk.addEventListener('click', () => {
  const zakupy = Number(prompt('Wartość zakupów (zł):'));
  const kolor = prompt('Kolor swetra:');

  if (zakupy > 200 && (kolor === 'zielony' || kolor === 'niebieski')) {
    akapit.textContent = `Rabat przysługuje (${zakupy} zł, sweter ${kolor}).`;
  } else {
    akapit.textContent = 'Brak rabatu.';
  }
});

Na egzaminie

Ściąga

Zadania

const punkty = 75;

if (punkty < 0 || punkty > 100) {
  // sprawdzamy zakres NAJPIERW, inaczej 120 dostałoby „celujący”
  console.log("Błędna liczba punktów");
} else if (punkty >= 90) {
  console.log("celujący");
} else if (punkty >= 75) {
  console.log("bardzo dobry");       // 75 wchodzi tu: 75 >= 75 jest true
} else if (punkty >= 50) {
  console.log("dostateczny");
} else {
  console.log("niedostateczny");
}

function rabatNaFarbe(kolor, pojemnosc) {
  // „lub” między kolorami w nawiasach, bo obok stoi &&
  return (kolor === "niebieski" || kolor === "zielony") && pojemnosc === 2;
}
console.log(rabatNaFarbe("zielony", 2), rabatNaFarbe("zielony", 5)); // true false

function maStypendium(srednia, miejsce) {
  // zakres 1–3 to dwa warunki z &&; całość z || bo wystarczy jedno
  return srednia >= 4.75 || (miejsce >= 1 && miejsce <= 3);
}
console.log(maStypendium(4.2, 2), maStypendium(4.2, 7)); // true false

function hasloPoprawne(haslo, login) {
  return haslo.length >= 8 && haslo.length <= 16 && haslo !== login;
}
console.log(hasloPoprawne("tajne1234", "ania"), hasloPoprawne("ania", "ania")); // true false

function biletUlgowy(wiek, weekend) {
  // „poniżej 18 albo powyżej 65” w nawiasach, „tylko w dni robocze” to && !weekend
  return (wiek < 18 || wiek > 65) && !weekend;
}
console.log(biletUlgowy(70, false), biletUlgowy(70, true)); // true false

// Wersja 1: if / else if / else
function kosztPaliwaIf(rodzaj, litry) {
  let cenaLitra;
  if (rodzaj === 1) {
    cenaLitra = 4;
  } else if (rodzaj === 2) {
    cenaLitra = 3.5;
  } else {
    cenaLitra = 0;
  }
  return `koszt paliwa: ${cenaLitra * litry} zł`;
}

// Wersja 2: switch – jedna zmienna, konkretne wartości
function kosztPaliwaSwitch(rodzaj, litry) {
  let cenaLitra;
  switch (rodzaj) {
    case 1:
      cenaLitra = 4;
      break;
    case 2:
      cenaLitra = 3.5;
      break;
    default:
      cenaLitra = 0;
  }
  return `koszt paliwa: ${cenaLitra * litry} zł`;
}

// Wersja 3: operator ?: – dwa poziomy, bo są trzy wyniki
function kosztPaliwaTernary(rodzaj, litry) {
  const cenaLitra = rodzaj === 1 ? 4 : rodzaj === 2 ? 3.5 : 0;
  return `koszt paliwa: ${cenaLitra * litry} zł`;
}

// Testy – te same dane do każdej wersji
console.log(kosztPaliwaIf(1, 10), "|", kosztPaliwaSwitch(1, 10), "|", kosztPaliwaTernary(1, 10)); // 40 zł
console.log(kosztPaliwaIf(2, 10), "|", kosztPaliwaSwitch(2, 10), "|", kosztPaliwaTernary(2, 10)); // 35 zł
console.log(kosztPaliwaIf(7, 10), "|", kosztPaliwaSwitch(7, 10), "|", kosztPaliwaTernary(7, 10)); // 0 zł

function czyPrzestepny(rok) {
  // (podzielny przez 4 i niepodzielny przez 100) lub podzielny przez 400
  return (rok % 4 === 0 && rok % 100 !== 0) || rok % 400 === 0;
}
console.log(czyPrzestepny(2024), czyPrzestepny(1900), czyPrzestepny(2000), czyPrzestepny(2023));
// true false true false

function cenaBiletu(wiek, godzina, czyWtorek) {
  if (czyWtorek) {
    return 15;                     // wtorek przebija wszystko – sprawdzamy go pierwszego
  }
  let cena = (wiek < 12 || wiek >= 65) ? 18 : 30;
  if (godzina < 13) {
    cena -= 5;
  }
  return cena;
}
console.log(cenaBiletu(30, 20, false), cenaBiletu(10, 20, false), cenaBiletu(10, 11, false), cenaBiletu(40, 11, true));
// 30 18 13 15

Test powtórkowy

var x = 10;
switch (x) {
case "10":
  alert("dziesięć");
  break;
}

var a = 5, b = "5";
document.write(a == b);
document.write(a === b);

var kolor = "czerwony";
if (kolor = "zielony") {
console.log("rabat");
} else {
console.log("brak rabatu");
}

var ilosc = 0;
if (ilosc) {
document.write("w koszyku");
} else {
document.write("pusty koszyk");
}