Instrukcje warunkowe i pętle w JavaScript

Po co się tego uczymy?

Bez warunków i pętli JavaScript może tylko wykonać z góry ustalone instrukcje w stałej kolejności — a to zdecydowanie za mało, żeby zbudować cokolwiek reagującego na dane wejściowe czy zawierającego listę elementów (np. filmów w katalogu).

Teoria

Instrukcje sterujące w JavaScript wyglądają niemal identycznie jak w PHP i C#, których już się uczyłeś — to bardzo dobra wiadomość, bo większość składni jest Ci już znana.

Instrukcja warunkowa:
if (warunek) { ... } else if (inny warunek) { ... } else { ... }

Pętle:
for (let i = 0; i < 10; i++) { ... } — pętla licznikowa, gdy z góry wiesz, ile razy coś powtórzyć.
while (warunek) { ... } — pętla warunkowa, powtarza się, dopóki warunek jest prawdziwy.
for (const element of tablica) { ... } — pętla "dla każdego elementu tablicy" (odpowiednik foreach z PHP/C#) — najczęściej używana forma pętli przy pracy z tablicami w JavaScript.

Te same słowa kluczowe co w innych językach: break (przerwij pętlę), continue (przejdź do następnej iteracji).

Przykład z życia

Kiedy strona wyświetla listę filmów pobraną wcześniej z serwera, właśnie pętla for...of przechodzi po każdym filmie z osobna i generuje dla niego fragment HTML.

Kod (JavaScript)

const filmy = ["Podróż w czasie", "Ostatni bastion", "Cichy ocean"];

// pętla for..of - dla każdego elementu tablicy
for (const tytul of filmy) {
    console.log("Film: " + tytul);
}

// pętla for licznikowa
for (let i = 1; i <= 5; i++) {
    console.log("Powtórzenie numer " + i);
}

// instrukcja warunkowa - klasyfikacja wieku widza
let wiekWidza = 16;

if (wiekWidza < 13) {
    console.log("Film dla dzieci");
} else if (wiekWidza < 18) {
    console.log("Film młodzieżowy");
} else {
    console.log("Film bez ograniczeń wiekowych");
}

Komentarz i wyjaśnienie kodu

for (const tytul of filmy) to najczytelniejszy sposób przejścia po tablicy w nowoczesnym JavaScript — nie musisz ręcznie zarządzać indeksem jak w klasycznej pętli for. Zwróć uwagę, że mimo deklaracji const tytul, pętla i tak działa poprawnie dla każdego elementu — const oznacza tu "ta zmienna nie zmieni się WEWNĄTRZ jednej iteracji", a nie że pętla nie może się powtarzać.

Ćwiczenie samodzielne

Napisz pętlę for...of wypisującą każdy element tablicy z trzema Twoimi ulubionymi filmami.

Zadania do pracy własnej

Napisz pętlę for wypisującą liczby od 1 do 10.
Napisz skrypt sprawdzający instrukcją if/else if/else, do jakiego przedziału cenowego należy podana cena filmu (tanie: do 5 zł, standardowe: 5-15 zł, premium: powyżej 15 zł).
Zbuduj tablicę obiektów reprezentujących filmy (każdy obiekt: {tytul: "...", cena: ...}), a następnie pętlą for...of wypisz do konsoli tylko te filmy, których cena przekracza 8 zł (użyj if wewnątrz pętli).

Typowe błędy

Częsty błąd to pętla nieskończona przy while — zapomnienie o zmianie warunku wewnątrz pętli sprawia, że przeglądarka "zawiesza się". Drugi błąd: próba modyfikacji elementu tablicy przez zmienną z pętli for...of zadeklarowanej jako const, myląc modyfikację ZMIENNEJ z modyfikacją elementu tablicy (to dwie różne rzeczy). Trzeci: pomylenie = z ==/=== wewnątrz warunku if — if (x = 5) to PRZYPISANIE, nie porównanie, i prawie zawsze jest błędem.

Nawiązanie do egzaminu zawodowego

To realizacja efektu INF.03.5.2.5: "stosuje instrukcje sterujące skryptowych języków programowania" — dokładnie ten sam efekt, który w PHP realizowałeś w Lekcjach 3 i 4 działu Aplikacje internetowe (PHP), tylko w innym języku.