Dzisiaj dowiesz się o kolejnej konstrukcji z zakresu wiedzy o języku JavaScript, która zdecydowanie poszerzy Twoje możliwości w zakresie pisania programów 💡. Tą konstrukcją jest pętla, a na początek dowiesz się do czego najlepiej pasuje pętla "while" w języku JavaScript! Będzie również parę zdań o tym, czego się wystrzegać ⚠️. Prosimy 😊!
PĘTLA "WHILE" W JĘZYKU JAVASCRIPT IDEALNYM ŚRODKIEM NA POWTARZANIE TEGO SAMEGO
Wiele razy, w Twoich założeniach jak ma działać program, na pewno znajdzie się kwestia wykonania pewnej sekwencji czynności wielokrotną liczbę razy. Po to wymyślono pętlę "while" jaką znajdziesz w naprawdę wielu 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 i 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 zostały poruszone w kolejnych artykułach ("for" i "do while"). Wystarczy żebyś zdał(a) sobie sprawę, że pętla "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 dany problem. To może być na przykład szukanie drogi do wyjścia. Idąc korytarzami możemy błądzić godzinę, 6 godzin albo od razu przez przypadek znaleźć wyjście 🔑. Ważną cechą jest nieprzewidywalność w zakończeniu powtarzania danych czynności ℹ️.
POZNAJ SIĘ Z PĘTLĄ "WHILE"!
Teraz popatrzmy na 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 piszesz 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.
Zwracam uwagę, że to jest pętla 🔁! To, co umieścisz wewnątrz klamerek, będzie wykonywane konsekwentnie tak długo, jak długo warunek zostanie spełniony! Oznacza to, że trzeba zadbać, żeby za którymś razem warunek nie został spełniony, aby pętla się zatrzymała.
PRZYKŁAD KODU ŹRÓDŁOWEGO
Najprostszym przykładem będzie wprowadzenie do warunku poddanie wartości zmiennej sprawdzeniu, czy jest ona większa od zadanego N. Możemy napisać 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ę Ci wpoić sobie to pojęcie jak najszybciej ‼️, gdyż jest dużo częściej używane w środowisku informatycznym, niż polskojęzyczny odpowiednik 🇵🇱.
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 - statycznej struktury danych przechowującej wiele wartości danego typu (więcej informacji w załączonym artykule) ℹ️.
Możesz też zrobić taką sztuczkę i jeszcze bardziej uprościć kod 👇:
let i = 0;
while (i < 10) {
console.log("Licznik: " + i++);
}Osadziliśmy sobie modyfikację licznika "i" jako postinkrementację w wywołaniu metody "console.log" ⭐. Jeżeli nie rozumiesz sensu działania, to bezpieczniej będzie korzystać z poprzedniej formy 👍. Chciałem tylko pokazać, że można tak zrobić, a zawsze zachęcam do pogłówkowania dlaczego taka forma również jest poprawna i kod musi wyglądać w taki sposób 🔍.
Tak czy owak, mamy to - pętla "while" w języku JavaScript, która wypisuje 10 razy komunikat ✔️. Co więcej, każdy z nich będzie reprezentować inną (aktualną) wartość licznika przechowywanego w zmiennej "i". Kiedy odpalisz sobie program klikając w "index.html" wykonany dawno temu razem z powyższym kodem, Twoim oczom ukaże się 10 wierszy tekstu w konsoli deweloperskiej JavaScript. Zwróć uwagę na zmianę wartości licznika, który rośnie nam o jeden do góry ➕!
To jest dokładnie coś, co mógłbyś/mogłabyś 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");Tak właśnie działa pętla "while", która wykona to samo, tylko w skondensowanej i o wiele bardziej profesjonalnej formie 🏆.
Innym sposobem zapisu może być też funkcja zwracająca wartość boolowską i to ona odpowiadałaby za warunek wejścia do pętli:
while (!packageWasDelivered()) {
console.log("Trwa transport paczki...");
}Tu mamy przypadek, w którym nie wiadomo ile razy może się powtórzyć dana instrukcja. Podpowiem, że najlepiej wtedy jest używać pętli "while", ponieważ jest do tego najlepiej dopasowana ze względu na swoją budowę (żeby zrozumieć o czym piszę, musisz zapoznać się z pętlą "for") 💡.
W SIDŁACH NIESKOŃCZONOŚCI
Napomknę co nieco o czymś, co już napisałem a propos 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 mamy ten sam przykład 👇:
let i = 0;
while (i < 10) {
console.log("Licznik: " + i);
}To będzie sobie lecieć w nieskończoność!!! A wiesz dlaczego? Bo warunek cały czas będzie prawdziwy 👀! Nigdy nie dochodzi do modyfikacji wartości licznika odpowiadającego za "wchodzenie" do pętli 🚨.
To jest tak, jakbyś napisał(a) 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 💥.
 |
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ź ostrożny(-a) i patrz uważnie, żeby każda pętla "while" w języku JavaScript któregoś razu zaprzestała wykonywania pewnych czynności.