Pętle w JavaScript — for i while

Uwaga: nie znalazłem odpowiednich materiałów w dostarczonych plikach; poniżej znajduje się przekształcony tekst wejściowy w formacie HTML.

Po co nam pętle?

Pętle służą do powtarzania fragmentu kodu wiele razy bez konieczności ręcznego powielania instrukcji. Zamiast pisać np. 10 razy console.log("Cześć"), możemy raz napisać pętlę, która wykona się 10 razy. Dzięki pętlom program staje się krótszy, czytelniejszy i łatwiejszy do modyfikacji.

Pętla for

Używamy jej, gdy z góry wiemy, ile razy chcemy powtórzyć kod (np. 5 razy, albo „dla każdego elementu listy”). Składnia pętli for w JavaScript wygląda następująco:

for (inicjalizacja; warunek; aktualizacja) {
    // kod do wykonania w każdym obiegu pętli
}

• Inicjalizacja: wykonuje się na początku pętli (tylko raz). Zwykle tworzymy tu zmienną licznikową, np. let i = 0.
• Warunek: sprawdzany przed każdym wykonaniem pętli. Dopóki zwraca true, pętla się wykonuje. Gdy warunek stanie się false, pętla kończy działanie.
• Aktualizacja: wykonywana po każdym obiegu, służy do zmiany wartości licznika, np. i++ (zwiększ i o 1).

Najczęściej pętle for wyglądają tak: zaczynamy licznik i od 0 lub 1, warunek to np. i <= 10, a aktualizacja to i++ (co jest skrótem od i = i + 1).

Przykład wypisujący liczby od 1 do 5:

for (let i = 1; i <= 5; i++) {
    console.log(i);
}

Ten kod wypisze kolejno w konsoli: 1, 2, 3, 4, 5. Pętla działa dopóki i <= 5. Po każdym obrocie i zwiększa się o 1. Gdy i stanie się 6, warunek będzie false i pętla się zakończy.

Pętlę for często używamy też do przechodzenia po znakach tekstu lub elementach tablicy. Przykładowo, możemy wypisać każdą literę napisu osobno:

let slowo = "DOM";
for (let i = 0; i < slowo.length; i++) {
    console.log(slowo[i]);
}

Wynik w konsoli:

D
O
M

Pętla zaczyna od i = 0 (pierwszy znak stringa ma indeks 0), działa dopóki i < slowo.length (length to długość napisu), a i++ zwiększa indeks. Wewnątrz wypisujemy slowo[i], czyli znak na pozycji i.

Pętla while

Wykonuje blok kodu tak długo, jak podany warunek jest spełniony (true). Składnia:

while (warunek) {
    // kod do wykonania dopóki warunek jest true
}

Pętla while nie ma w swojej definicji części odpowiadającej za inicjalizację czy aktualizację – musimy o to zadbać sami w kodzie. Zazwyczaj przed pętlą ustawiamy zmienną sterującą, a wewnątrz pętli zmieniamy ją, aby warunek kiedyś przestał być spełniony. Jeśli o tym zapomnimy, otrzymamy pętlę nieskończoną, która nigdy się nie zatrzyma.

Przykład ekwiwalentny do poprzedniej pętli for (wypisujący 1–5):

let j = 1;
while (j <= 5) {
    console.log(j);
    j++;
}

Tutaj manualnie zwiększamy j wewnątrz pętli. Działanie jest takie samo: pętla wykona się 5 razy, a zmienna j kolejno przyjmie wartości 1, 2, 3, 4, 5. Gdy po piątej iteracji j zostanie zwiększone do 6, warunek j <= 5 będzie fałszywy i pętla się zakończy.

Zastosowania pętli

Pętle są przydatne zawsze, gdy mamy wykonywać powtarzalne czynności. Możemy m.in.:

• Wypisywać kolejno pewien zakres liczb (np. wszystkie liczby parzyste od 2 do 10).
• Iterować po elementach tablicy i coś z nimi robić (o tym w następnej lekcji).
• Przetwarzać każdy znak w tekście (jak pokazano wyżej).
• Realizować określony licznik lub serię kroków (np. 10 razy wykonaj animację, 3 razy poproś o podanie hasła itp.).

W przyszłości zobaczymy też do...while oraz for...of, ale na początek for i while w zupełności wystarczą do podstawowych zadań.

Ćwiczenia

1. Napisz pętlę for, która wypisze w konsoli liczby od 1 do 10.
2. Napisz pętlę for, która wypisze w konsoli wszystkie litery dowolnego podanego słowa (np. dla słowa "JAVASCRIPT" powinno wypisać kolejno J, A, V, A, ...). Wykorzystaj właściwość .length stringa oraz dostęp do liter przez operator [], tak jak pokazano w przykładzie z napisem "DOM".
3. Napisz skrypt, który przy użyciu pętli obliczy sumę liczb od 1 do 50. Możesz do tego celu zadeklarować zmienną suma = 0 i w każdym obiegu pętli dodawać do niej aktualny numer iteracji.
4. Napisz pętlę while, która odliczy od 5 do 1, a następnie po wyjściu z pętli wypisze w konsoli "Start!" (symulując odliczanie przed startem). Upewnij się, że pętla się zakończy (np. dekrementując licznik).