JASON. GRY, MUZYKA, KURSY, ARTYKUŁY, PROGRAMY I FILMY!

Część podstawowego zakresu wiedzy z JavaScriptu przerobiona. Dzisiaj dowiecie się o kolejnej konstrukcji, która zdecydowanie poszerzy Wasze możliwości w zakresie pisania programów mających wykonywać te same polecenia wiele razy. Tą konstrukcją jest pętla, a na początek dowiecie się do czego najlepiej pasuje pętla "while" w języku JavaScript! Parę słów będzie również o tym, czego się wystrzegać.

PĘTLA "WHILE" W JĘZYKU JAVASCRIPT IDEALNYM ŚRODKIEM NA POWTARZANIE TEGO SAMEGO

Na pewno znajdzie się problem do rozwiązania polegający na wykonaniu pewnej sekwencji czynności wielokrotną liczbę razy. No i co, zamierzacie naprawdę pisać po stokroć to samo, aż wyczerpie się Wam chęć?

console.log("Piszę to samo.");
console.log("Piszę to samo.");
console.log("Piszę to samo.");
// i tak dalej...

Nie, tak się nie robi! Zresztą gdybyście chcieli coś wykonywać nieokreśloną liczbę razy, to jak to zrobicie? Absurd! Po to wymyślono pętlę "while" jaką znajdziecie w naprawdę wielu popularnych językach wysokiego poziomu. W języku JavaScript pętla "while" funkcjonuje tak samo. Jest to blok instrukcji wykonywany jeden raz po drugim dopóty, dopóki określony warunek nie zostanie spełniony. To działa podobnie jak instrukcja warunkowa, z tym że ona sprawdza warunek i w przypadku jego spełnienia, wykonuje podane instrukcje ale odbywa się to JEDNORAZOWO. W pętli to może się wykonywać cyklicznie. To jest istotna różnica!

Poznawszy pętlę "while" należy też wiedzieć kiedy najlepiej ją stosować porównując to do pozostałych pętli jakie zostaną poruszone w kolejnych artykułach ("for" i "do while"). Wystarczy żebyście zdali sobie sprawę, że "while" będzie pasować najbardziej do instrukcji przy których nie da się ustalić ile razy będą musiały zostać wykonane, żeby rozwiązywały podany problem. To może być na przykład szukanie drogi do wyjścia. Idąc korytarzami możemy błądzić godzinę, sześć godzin albo od razu przez przypadek znaleźć wyjście.

POZNAJ SIĘ Z PĘTLĄ "WHILE"!

No dobrze, a teraz sposób zapisu. Pętla "while" w języku JavaScript budowana jest w sposób następujący:

while ([warunek])
{
    // instrukcje wykonywane raz po raz, aż warunek przestanie być prawdziwy
}

Na początku serwujecie słówko kluczowe "while", a zaraz po nim parę nawiasów okrągłych, tych samych jak przy instrukcji "if". Co wewnątrz? Warunek! Również tak samo jak w instrukcji warunkowej. Klamerki i pomiędzy nimi, blok instrukcji do wykonania. Jeszcze raz wyraźnie zaznaczam, że to co umieścicie wewnątrz klamerek, będzie wykonywane konsekwentnie tak długo, jak długo warunek zostanie spełniony! Oznacza to, że trzeba zadbać o to, żeby za którymś razem test stał się fałszywy, a pętla zatrzymana.

PRZYKŁAD KODU ŹRÓDŁOWEGO

Spróbuję to doprecyzować. Najprostszym przykładem będzie wprowadzenie do warunku poddawanie wartości zmiennej sprawdzeniu czy jest większa od zadanego N. Zróbmy tak:

let i = 0;

while (i < 10)
{
    console.log("Licznik: " + i);
    
    ++i;
}

Podałem chyba najczęściej widzianą postać pętli "while" stawiając za przykład iterowanie ileś razy. Iteracja to z łaciny "powtórzenie" i radzę wpoić sobie to pojęcie jak najszybciej, gdyż jest dużo częściej używane w środowisku informatycznym niż "powtórzenie" a chodzi o to samo. I jeszcze jedno co do nazewnictwa. Mała literka 'i' to najczęściej wykorzystywana nazwa zmiennej do sterowania przepływem pętli. Litera 'i' pochodzi od słowa "indeks", a on z kolei ma związek z argumentami tablicy.

Możecie też zrobić taką sztuczkę jeszcze bardziej upraszczając kod:

let i = 0;

while (i < 10)
{
    console.log("Licznik: " + i++);
}

Osadziliśmy sobie modyfikację licznika jako postinkrementację w wywołaniu metody "console.log". Jeśli nie rozumiecie sensu działania, to bezpieczniej będzie korzystać z poprzedniej formy. Chciałem Wam tylko pokazać, że można tak zrobić.

Wracamy do przykładu. Tak może wyglądać zaprogramowana pętla "while" w języku JavaScript, która wypisze dziesięć razy komunikat. Co więcej, każdy z nich będzie reprezentować inną (aktualną) wartość licznika przechowywanego w zmiennej "i". Kiedy odpalicie sobie program klikając Wasz "index.html" wykonany dawno temu, razem z powyższym kodem, Waszym oczom ukaże się dziesięć wierszy tekstu w konsoli deweloperskiej JavaScript. To jest dokładnie coś, co moglibyście napisać w taki sposób:

console.log("Licznik: 0");
console.log("Licznik: 1");
console.log("Licznik: 2");
console.log("Licznik: 3");
console.log("Licznik: 4");
console.log("Licznik: 5");
console.log("Licznik: 6");
console.log("Licznik: 7");
console.log("Licznik: 8");
console.log("Licznik: 9");

Zapis prostacki, ale tak właśnie działa pętla "while", która wykona to samo tylko w skondensowanej i o wiele profesjonalnej formie. Innym przykładem mogłaby być też funkcja zwracająca wartość boolowską i to ona odpowiadałaby za warunek wejścia do pętli:

while (notDeliveredYet())
{
    console.log("Trwa transport paczki...");
}

W SIDŁACH NIESKOŃCZONOŚCI

Napomknę co nieco o czymś, co już napisałem apropos sprawienia, żeby pętla "while" w języku JavaScript kiedyś się zatrzymała, aby nie doszło do zawieszenia się przeglądarki (tak, może się tak zdarzyć!). Przypuśćmy, że cały czas mówimy o tym samym przykładzie:

let i = 0;

while (i < 10)
{
    console.log("Licznik: " + i);
}

To będzie sobie lecieć w nieskończoność!!! A wiecie dlaczego? Bo warunek cały czas będzie prawdziwy! A konkretniej to nie dochodzi nigdy do modyfikacji wartości licznika odpowiadającego za "wchodzenie" do pętli. To jest tak, jakbyście napisali to w następującej formie:

while (true)
{
    console.log("Licznik: 0");
}

I tak to sobie będzie lecieć do wyczerpania zapasów pamięci RAM.

Pętla "while" w języku JavaScript

Pętla "while" wykonuje zawarte w bloku instrukcje do momentu, aż warunek wejścia nie zostanie spełniony.


Myślę, że przedstawiłem wszystko co wymagało komentarzy i wytłumaczeń. Bądźcie ostrożni, żeby każda pętla "while" w języku JavaScript któregoś razu zaprzestała wykonywania tych samych czynności, a będzie dobrze.

PODOBNE ARTYKUŁY