Co to jest loop w Javascript? Jak działają pętle for i while w Javascript?

W JavaScript, pętla (loop, cykl lub jak mówi słowotwór - kolobieg) jest konstrukcją języka, która pozwala na wielokrotne wykonywanie bloku kodu. Umożliwia automatyzację powtarzalnych działań lub przetwarzanie list (tablic) danych. W JavaScript istnieje kilka typów pętli. Najczęściej używane to: for i while. Pętla for

Pętla for jest używana do wykonywania bloku kodu określoną liczbę razy. Ma następującą składnię:

for (inicjalizacja; warunek; krok) {
    // blok kodu, który się powtarza
}

Z pierwszego spojrzenia nie jest jasne, co to jest inicjalizacja, warunek i krok. W pętli for w JavaScript, inicjalizacja, warunek i krok są składnikami, które pomagają kontrolować wykonanie pętli.

 Inicjalizacja (initialization): To początkowa wartość lub początkowe ustawienie zmiennych, które są używane w pętli. Wykonywana jest tylko raz przed rozpoczęciem wykonania pętli. Inicjalizacja zazwyczaj obejmuje deklarację zmiennej i przypisanie początkowej wartości. Rozważmy rzeczywisty przykład pętli for: 

for (let i = 0; i < 5; i++) {
    // blok kodu, który się powtarza	
}

W tym przykładzie let i = 0 jest inicjalizacją. Zmienna i jest tworzona i inicjalizowana wartością 0 przed rozpoczęciem pętli. Warunek (condition): To warunek, który jest sprawdzany przed każdą iteracją pętli. Jeśli warunek jest spełniony (ma wartość true), blok kodu pętli jest wykonywany. Jeśli warunek nie jest spełniony (ma wartość false), wykonanie pętli kończy się i wykonywany jest następny kod po pętli. W naszym przykładzie i < 5 jest warunkiem. Dopóki i jest mniejsze od 5, pętla będzie się wykonywać. Gdy tylko i stanie się równe lub większe od 5, pętla zostaje zatrzymana. Krok (step): To operacja, która jest wykonywana po każdej iteracji pętli. Zmienia wartość zmiennej używanej w pętli na następną iterację. Po każdej iteracji zmienna i zwiększa się o 1.

W ten sposób inicjalizacja, warunek i krok razem pomagają kontrolować powtarzanie bloku kodu w pętli for, wskazując punkt początkowy, warunek kontynuacji oraz zmiany, które zachodzą po każdej iteracji. Przykład pętli for, która wypisze w konsoli przeglądarki liczby od 1 do 5.

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

Przykład użycia for dla tablicy. Przejdźmy przez tablicę danych (tablica z imionami kotów).

const cats = ['Humus', 'Kula', 'Korżyk', 'Chili', 'Tom'];

for (let i = 0; i < cats.length; i++) {
    console.log('Kot: ' + cats[i]);
}

W tym przykładzie tworzona jest tablica cats, która zawiera różne koty. Następnie pętla for jest używana do przechodzenia przez elementy tablicy i wypisywania każdego kota w konsoli przeglądarki. Zmienna i jest używana do śledzenia bieżącego indeksu elementu tablicy i zwiększa się z każdą iteracją (i++). W konsoli zobaczymy następujące:

Kot: Humus
Kot: Kula
Kot: Korżyk
Kot: Chili
Kot: Tom

Pętla while

Pętla while wykonuje blok kodu, dopóki określony warunek jest prawdziwy. Ma następującą składnię:

while (warunek) {
    // blok kodu, który się powtarza
}

W tym przypadku warunek jest czymś bardziej zrozumiałym. Na przykład, taka pętla wypisze liczby od 1 do 5:

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

W pętli while, warunek jest wyrażeniem, które jest sprawdzane przed każdą iteracją. Jeśli warunek jest prawdziwy (ma wartość true), blok kodu jest wykonywany. Jeśli warunek jest fałszywy (ma wartość false), wykonanie pętli kończy się. W przykładzie blok kodu console.log(i) jest wykonywany, dopóki i jest mniejsze od 5. Zmienna i zwiększa się o 1 po każdej iteracji. Gdy i staje się równe lub większe od 5, warunek staje się fałszywy, a pętla kończy się. Warunek w pętli while odgrywa ważną rolę w kontrolowaniu powtarzania bloku kodu w pętli. Ważne jest, aby upewnić się, że warunek zmienia się w trakcie wykonywania pętli, aby uniknąć nieskończonej pętli. Nieskończona pętla w JavaScript to pętla, która nigdy się nie kończy i kontynuuje powtarzanie się w nieskończoność. Taka pętla może wystąpić, gdy warunek pętli zawsze ma wartość true, lub gdy warunek nie jest aktualizowany w taki sposób, aby pętlę można było zakończyć.

while (true) {
  // blok kodu, który powtarza się zawsze
}

W tym przykładzie warunek true zawsze ma wartość true, więc pętla nigdy się nie zakończy i będzie powtarzać się w nieskończoność. Tego typu pętla może prowadzić do niewłaściwego wykorzystania zasobów i awarii programu (przeglądarka internetowa zawiesi się, jeśli to jest strona internetowa).

Aby uniknąć nieskończonych pętli, należy upewnić się, że warunek pętli zmienia się w taki sposób, aby można go było wykonać i, w razie potrzeby, zakończyć pętlę. Na przykład, poprzez użycie zmiennych, zarządzanie wykonaniem pętli lub użycie polecenia break do wyjścia z pętli w określonych warunkach

const cats = ['Humus', 'Kula', 'Korżyk', 'Chili', 'Tom'];

let i = 0;
while (i < cats.length) {
    console.log('Kot: ' + cats[i]);
    i++;
}

W tym przykładzie również tworzona jest tablica cats, która zawiera różne koty. Zmienna i jest inicjalizowana na początku poza pętlą z wartością 0. Następnie while jest wykonywana, dopóki i jest mniejsze od długości tablicy cats. W każdej iteracji pętli wypisywana jest nazwa kota w konsoli, po czym wartość i zwiększa się o 1 (i++). W konsoli zobaczymy następujące:

Kot: Humus
Kot: Kula
Kot: Korżyk
Kot: Chili
Kot: Tom