Pętle while i do…while w JavaScript ↩️

Automatyzacja jest techniką, dzięki której systemy działają w sposób automatyczny; w programowaniu pętli używamy do automatyzacji powtarzalnych zadań. Pętle są jednym z najbardziej przydatnych elementów języków programowania, a w tym artykule dowiemy się o pętlach while i do…while w języku JavaScript.

Instrukcje while i do…while w JavaScript są podobne do instrukcji warunkowych, które są blokami kodu wykonywanymi w przypadku spełnienia określonego warunku. W przeciwieństwie do instrukcji if, która określa wartość tylko raz, pętla będzie działać wiele razy, aż warunek przestanie być prawdziwy.

Innym typowym rodzajem pętli, z którą się spotkasz, jest instrukcja for, która wykonuje instrukcje w bloku określoną liczbę razy. Pętle while i do…while są oparte na warunkach, dlatego też posiadanie wiedzy dotyczącej dokładnej liczby wykonania pętli nie jest konieczne.

Pętla while w Javascript

W języku JavaScript, instrukcja while jest pętlą, która działa tak długo, jak długo określony warunek jest spełniony.

Jak można zaobserwować na poniższym przykładzie, składnia pętli while jest bardzo podobna do składni instrukcji warunkowej if.

while (warunek) {
    // wykonaj kod dopóki warunek zwraca true
}

Instrukcja while jest najbardziej podstawową pętlą tworzoną w JavaScript.

Jako przykład załóżmy, że mamy akwarium z limitem populacji. W każdej iteracji pętli dodamy jedną rybę. Gdy w akwarium będzie 10 ryb, limit populacji zostanie osiągnięty, a program zaprzestanie dodawania kolejnych ryb.

// Ustawiamy limit populacji w akwarium na 10
const popLimit = 10;

// Zaczynamy od 0 ryb
let ryba = 0;

// Inicjujemy petle while aby zwiekszyc populacje
while (ryba < popLimit) {
    // dodajemy jedna rybke za kazda iteracja
    ryba++;
    console.log("W pomieszczeniu może zamieszkać jeszcze " + (popLimit - ryba) + " ryb.");
}

Po uruchomieniu powyższego programu otrzymamy następujące dane wyjściowe, prezentujące iterację programu w pętli while, dopóki warunki nie będą spełnione.

W pomieszczeniu może zamieszkać jeszcze 9 ryb.
W pomieszczeniu może zamieszkać jeszcze 8 ryb.
W pomieszczeniu może zamieszkać jeszcze 7 ryb.
W pomieszczeniu może zamieszkać jeszcze 6 ryb.
W pomieszczeniu może zamieszkać jeszcze 5 ryb.
W pomieszczeniu może zamieszkać jeszcze 4 ryb.
W pomieszczeniu może zamieszkać jeszcze 3 ryb.
W pomieszczeniu może zamieszkać jeszcze 2 ryb.
W pomieszczeniu może zamieszkać jeszcze 1 ryb.
W pomieszczeniu może zamieszkać jeszcze 0 ryb.

W naszym przykładzie ustawiliśmy naszą pętlę while tak, aby działała tak długo, jak długo liczba ryb jest mniejsza od limitu populacji w akwarium. W każdej iteracji jedna ryba jest dodawana do akwarium, aż wszystkie 10 miejsc zostanie wypełnionych. W tym momencie pętla przestaje działać.

Pętle nieskończone

Pętla nieskończona, jak sama nazwa wskazuje, to pętla, która będzie działać w nieskończoność. Jeśli przypadkowo utworzysz nieskończoną pętlę, może to spowodować awarię przeglądarki lub komputera. Ważne jest, aby być świadomym istnienia nieskończonych pętli, aby móc ich unikać.

Nieskończona pętla występuje, gdy warunek instrukcji while jest ustawiony na true. Poniżej znajduje się przykład kodu, który będzie działał w nieskończoność. Testowanie nieskończonych pętli nie jest konieczne.

// Inicjalizacja nieskończonej petli
while (true) {
    // kod wykonuje sie bez zatrzymania
}

Nieskończona pętla będzie działać w nieskończoność, ale program można zakończyć za pomocą słowa kluczowego break.

W poniższym przykładzie dodamy instrukcję if do pętli while, a gdy ten warunek zostanie spełniony, zakończymy pętlę słowem kluczowym break.

// Ustawiamy warunek na true
const rezerwat = true;
let zubr = 5;

// Inicjalizujemy nieskonczona petle
while (rezerwat) {
  console.log(`Zostalo w rezerwacie ${zubr} zubrow.`);
  zubr--;
  // Terminate infinite loop when following condition is true
  if (zubr === 0) {
    console.log("Nie zostalo zadnego zubra.");
    break;
  }
}

Gdy uruchomimy powyższy kod, wynik będzie następujący.

Zostalo w rezerwacie 5 zubrow.
Zostalo w rezerwacie 4 zubrow.
Zostalo w rezerwacie 3 zubrow.
Zostalo w rezerwacie 2 zubrow.
Zostalo w rezerwacie 1 zubrow.
Nie zostalo zadnego zubra.

Zauważ, że niekoniecznie jest to praktyczna metoda tworzenia i kończenia pętli, ale break jest użytecznym słowem kluczowym, o którym należy pamiętać.

Pętla do…while w Javascript

Dowiedzieliśmy się już o pętli while, która wykonuje blok kodu, dopóki spełniony jest określony warunek. Oparta na tym jest instrukcja do…while, która jest bardzo podobna do while, z tą różnicą, że pętla do…while będzie zawsze wykonywana raz, nawet jeśli warunek nigdy nie jest prawdziwy.

Poniżej zademonstrujemy składnię pętli do…while.

do {
    // wykonujemy kod
} while (warunek);

Jak widać, część “do” pętli jest pierwsza, po niej natomiast występuje while (warunek). Blok kodu zostanie uruchomiony, a następnie warunek zostanie przetestowany w standardowej pętli while.

Aby to przetestować, możemy ustawić zmienną na 0, zwiększyć ją w instrukcji do i ustawić warunek na false.

// Ustawiamy zmienna na 0
let x = 0;

do {
    // Zwiekszamy wartosc zmiennej o 1
    x++;
    console.log(x);
} while (false);

1

Wynikiem okazało się być 1, co oznacza, że blok kodu iterował raz przez pętlę (od 0), zanim został zatrzymany przez niespełniony warunek while.

Pamiętając, że pętla wykona się co najmniej raz, pętla do…while może być używana do tych samych celów, co pętla while.

Podsumowanie

W tym artykule dowiedzieliśmy się o pętli while, pętli do…while i nieskończonych pętlach w JavaScript.

Automatyzacja powtarzalnych zadań jest niezwykle ważną częścią programowania, a pętle te mogą pomóc w zwiększeniu wydajności i zwięzłości programów.