Pętle i Iteracje w JS

Jeżeli na egzaminie padnie zadanie typu: "Wypisz w konsoli (lub na stronie) liczby od 1 do 100", ręczne wklejanie kodu mija się z celem. Pętle służą do automatyzacji powtarzalnych czynności.

Pętla for

Najpopularniejsza, niezastąpiona przy przeszukiwaniu tablic lub gdy znasz dokładną liczbę powtórzeń.

// Składa się z 3 elementów oddzielonych średnikami:
// 1. Deklaracja początkowa (zwykle i = 0)
// 2. Warunek trwania pętli
// 3. Krok po każdym przejściu (inkrementacja i++)

for (let i = 0; i < 5; i++) {
    console.log("To jest okrążenie numer: " + i);
}

Ważne! Indeksowanie w informatyce niemal zawsze zaczyna się od 0. Zatem dla warunku i < 5, pętla wykona się 5 razy dla wartości i: 0, 1, 2, 3, 4.

Co to jest i++? To tzw. inkrementacja. Jest to dokładnie to samo co i = i + 1. Dodaje 1 do zmiennej. Istnieje też dekrementacja i-- (odejmowanie 1).

Pętla while

Używana najczęściej, gdy nie wiemy z góry, ile razy kod będzie musiał się powtórzyć, i działamy tak długo, aż zostanie spełniony pewien warunek.

let punkty = 0;

while (punkty < 100) {
    // wykonujemy skomplikowaną logikę gry...
    punkty = punkty + 10;
}

Pułapka nieskończoności 🪤

Najgorsze co można zrobić w JavaScript w przeglądarce, to stworzyć nieskończoną pętlę. Zawiesi to aktualną kartę Chrome/Firefox do momentu brutalnego zamknięcia! Zawsze upewniaj się, że w środku pętli znajduje się instrukcja, która w końcu doprowadzi do "przerwania" warunku, np.:

let warunek = true;
while (warunek) {
    // jeśli zapomnisz tutaj dopisać 'warunek = false;' w odpowiednim momencie
    // stworzysz nieskończoną pętlę śmierci!
}

Pętla do...while

Działa jak while, ale ma jedną kluczową różnicę: wykona się zawsze przynajmniej raz, nawet jeśli warunek początkowy jest fałszywy! Bo sprawdzenie warunku odbywa się na końcu.

let hasloWpisane = "";
do {
    // To odpali się chociaż raz, zmuszając użytkownika do akcji
    hasloWpisane = prompt("Podaj hasło:");
} while (hasloWpisane !== "tajne");