Rozgrzewka: porównania i logika

1. Co zwróci 5 === "5"?
2. Kiedy wyrażenie z && zwraca true?
3. Jaki błąd kryje się w warunku if (x = y)?

if - znacie to już z PHP

Jeśli piszecie też w PHP, to znacie stamtąd ten zapis: słowo if, w nawiasie warunek, w klamrach { } kod, który wykona się tylko wtedy, gdy warunek da true. W JavaScript składnia jest niemal identyczna.

let age = 20;
if (age >= 18) {
  console.log("wstęp");
}

Ciekawostka z MDN: warunek w if nie musi być porównaniem - wystarczy sama zmienna. JavaScript sam sprawdza, czy jej wartość liczy się jako prawda czy fałsz: za fałsz liczą się tylko false, undefined, null, 0, NaN i pusty tekst, wszystko inne przechodzi jako prawda.

Dwie drogi: if … else

Sam if obsługuje tylko jedną drogę - gdy warunek jest fałszywy, nic się nie dzieje. Dopisanie else daje drugą drogę: kod w else wykona się dokładnie wtedy, gdy warunek dał false. MDN pokazuje to na przykładzie rodzica, który obiecuje dziecku kieszonkowe za zrobienie zakupów.

let shoppingDone = false;
let childAllowance;

if (shoppingDone === true) {
  childAllowance = 10;
} else {
  childAllowance = 5;
}
// childAllowance: 5

Kilka progów: else if

Gdy dróg jest więcej niż dwie, między if a końcowym else wstawiacie tyle bloków else if, ile potrzeba. JavaScript sprawdza warunki od góry - pierwszy prawdziwy wygrywa, reszta jest pomijana.

To samo, inna pisownia

Logika jest identyczna - dwie różnice w pisowni.

if ($temp > 30) {
    echo "upał";
} elseif ($temp > 20) {
    echo "ciepło";
} else {
    echo "zimno";
}

if (temperature > 30) {
  console.log("upał");
} else if (temperature > 20) {
  console.log("ciepło");
} else {
  console.log("zimno");
}

W jednym if więcej niż jeden warunek

Warunki w if można łączyć operatorami && i || z poprzedniej lekcji. Nawiasy działają jak w matematyce - grupują, co ma być sprawdzone razem.

function getDiscount(color, purchaseAmount) {
  if ((color === "zielony" || color === "niebieski") && purchaseAmount > 200) {
    return true;
  }
  return false;
}

Nawias wokół || jest konieczny: bez niego && policzyłby się najpierw i warunek działałby inaczej (jak w pytaniu egzaminacyjnym na następnym slajdzie).

Tak pytają na egzaminie

Ćwiczenie: funkcja rabatu

1. Otwórz script.js - ten sam plik co na poprzednich lekcjach.
2. Napisz funkcję getDiscount(color, purchaseAmount): jeśli color to "zielony" lub "niebieski" ORAZ purchaseAmount jest większe niż 200, funkcja zwraca true, w przeciwnym razie false.
3. Wywołaj funkcję na 3 przykładach i wypisz wyniki w konsoli: console.log(getDiscount("zielony", 250)), getDiscount("niebieski", 150), getDiscount("czerwony", 300).
4. Zapisz plik, odśwież stronę w przeglądarce i sprawdź wyniki w konsoli (F12 → Console).
5. Dla chętnych: zapisz zmiany w swoim repozytorium - commit „Dodaje funkcje getDiscount”.

A jak to wygląda w produkcji?