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ć.
| Tweet |
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 XD? 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 są 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ązał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 poddawania wartości zmiennej sprawdzeniu czy jest ona 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ż polskojęzyczny odpowiednik, 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ć, a któregoś dnia zrozumiecie jak to działa (i dlaczego).
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 bardziej 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 zasobów pamięci RAM :O.
 |
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.