Każdy użyteczny program w końcu dociera do punktu decyzyjnego. Czy ten przycisk powinien przesłać formularz, czy wyświetlić błąd? Czy ten u

Każdy użyteczny program w końcu trafia na punkt decyzyjny. Czy ten przycisk powinien wysłać formularz, czy wyświetlić błąd? Czy ten użytkownik widzi panel administratora, czy widok gościa? JavaScript odpowiada na te pytania za pomocą instrukcji warunkowych. Są one zaworami sterującymi Twoim kodem: otwierają jedną ścieżkę, zamykają inną, a wszystko to na podstawie tego, czy dane wyrażenie przyjmuje wartość true czy false. Bez nich Twój skrypt poruszałby się od góry do dołu, nie reagując nigdy na osobę, która go używa.

Najprostsza gałąź: if

Instrukcja if to brama, przez którą przechodzisz w pierwszej kolejności. W nawiasach umieszczasz warunek. Jeśli warunek ten przyjmie wartość true, wykona się blok kodu znajdujący się poniżej. Jeśli przyjmie wartość false, JavaScript całkowicie pominie ten blok i przejdzie dalej w pliku.

To jest dokładnie to, czego potrzebujesz do prostych, jednorazowych sprawdzeń. Wyobraź sobie walidację pola formularza przed wysłaniem czegokolwiek na serwer:

const email = document.getElementById("email").value;

if (email === "") {
  alert("Please enter your email.");
}

Brak email, brak wysyłki. Logika jest prosta i jasna. Używaj if, gdy masz tylko jeden szczególny przypadek, przed którym chcesz się chronić, i nie wymagana jest żadna alternatywna akcja.

Obsługa opcji „albo–albo”: if...else

Większość rzeczywistych decyzji ma dwie strony. Para if...else pokrywa właśnie to. Jeden blok wykonuje się, gdy warunek jest prawdziwy, a drugi, gdy jest fałszywy. Te dwie ścieżki wzajemnie się wykluczają.

Wyobraź sobie sprawdzanie trybu ciemnego przy ładowaniu strony:

const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;

if (prefersDark) {
  document.body.classList.add("dark");
} else {
  document.body.classList.add("light");
}

Przeglądarka nigdy nie doda obu klas jednocześnie. Wybiera jedną ścieżkę, wykonuje ją i idzie dalej. Za każdym razem, gdy Twoja logika dzieli się wyraźnie na dwa możliwe wyniki, jest to struktura, po którą powinieneś sięgnąć.

Wiele ścieżek: if...else if...else

Nie każdy problem jest binarny. Czasami potrzebujesz drabiny możliwości. Łańcuch if...else if...else pozwala sprawdzać kilka warunków w sekwencji. JavaScript ocenia je od góry do dołu i wykonuje pierwszy blok, którego warunek jest prawdziwy. Po znalezieniu dopasowania reszta drabiny jest ignorowana.

Klasycznym przykładem jest przypisywanie oceny literowej na podstawie wyniku liczbowego:

const score = 87;
let grade;

if (score >= 90) {
  grade = "A";
} else if (score >= 80) {
  grade = "B";
} else if (score >= 70) {
  grade = "C";
} else {
  grade = "F";
}

Kolejność ma tutaj ogromne znaczenie. Jeśli sprawdzisz score >= 70 przed score >= 90, prawie każda ocena pozytywna trafi do kategorii C, ponieważ pierwsze prawdziwe dopasowanie wygrywa. Zachowaj kolejność warunków od najbardziej szczegółowych do najmniej szczegółowych i zawsze kończ łańcuch końcowym else, aby przechwycić wszystko, co mogłoby umknąć.

Dopasowywanie stałych wartości: switch

Kiedy porównujesz jedną zmienną z listą znanych stałych, długi łańcuch if...else staje się nieczytelny. Instrukcja switch porządkuje te rzeczy. Ocenia wyrażenie raz, a następnie porównuje je z etykietami case przy użyciu ścisłej równości (===). Dzięki temu kod jest łatwiejszy do przeanalizowania, gdy opcje są rozdzielne i nazwane.

Rozważ ustawienie godzin otwarcia sklepu na podstawie aktualnego dnia:

const day = new Date().getDay();

switch (day) {
  case 0:
    console.log("Sunday hours: 10am - 4pm");
    break;
  case 6:
    console.log("Saturday hours: 9am - 6pm");
    break;
  default:
    console.log("Weekday hours: 8am - 8pm");
}

Uważaj na break. Jeśli go pominiesz, wykonanie przejdzie do kolejnego case i będzie kontynuowane. Takie zachowanie jest okazjonalnie przydatne, ale częściej powoduje ciche błędy. Używany prawidłowo, switch sprawia, że Twoja intencja jest od razu widoczna i utrzymuje powiązane gałęzie wyrównane w jednej schludnej kolumnie.

Zwięzłe decyzje: Operator trójargumentowy

Operator trójargumentowy (ternarny) — zapisywany jako ? : — jest wyrażeniem, a nie instrukcją. To rozróżnienie ma znaczenie