Pętle w języku JavaScript po raz trzeci 3️⃣! Tak! Będzie o jeszcze jednej odmianie, gdyż w języku JavaScript występuje także pętla "for"! Jest ona znacznie bardziej rozbudowana od dwóch poprzedniczek, stąd uprzedzam, że artykuł na jaki spojrzysz będzie nieco większy 😳. Zapraszam do lektury 📖!
PĘTLA "FOR" W JĘZYKU JAVASCRIPT TO JUŻ INNA BAJKA
Po wyjaśnieniu pętli "while" oraz "do while", pora poznać trzeci typ pętli, jaką jest "for" 🔔. Doskonała do zadań, w których możemy przewidzieć liczbę powtórzeń czyt. iteracji ✅. Pamiętasz przykład z pętlą "while" 👇?
let i = 0;
while (i < 10) {
console.log("Licznik: " + i++);
}Pętla "for" będzie dużo bardziej pasować w tym przypadku i już za chwilę Ci to udowodnię, drogi Czytelniku 🙂. Wpierw trzeba zapoznać Cię z podstawowym budulcem jaki obowiązuje.
SZKIELET PĘTLI "FOR"
Ogólna postać wygląda tak 👇:
for ([zmienna iteracyjna]; [warunek]; [modyfikacja zmiennej iteracyjnej co iterację]) {
// instrukcje
}Pętla "for" w języku JavaScript składa się z trzech części umieszczonych pomiędzy nawiasy okrągłe:
- inicjacja, czyli utworzenie zmiennej występującej jedynie wewnątrz bloku pętli (nazywa się ją "zmienną iteracyjną"),
- test, czyli warunek dopuszczenia programu do pętli celem wykonania poleceń, jak w instrukcji warunkowej (wartość logiczna),
- aktualizacja, czyli konsekwentna modyfikacja wartości zmiennej iteracyjnej co każdą zakończoną iterację np. zwiększenie wartości o jeden (inkrementacja).
Spójrz na średniki oddzielające poszczególne części! To jest fragment składni! Nie wolno Ci tego pominąć, bo zostanie zgłoszony błąd składniowy 🚫!
PRZYKŁAD KODU ŹRÓDŁOWEGO
Tak oto wracamy do początku naszego przykładu i ukazania dlaczego pętla "for" w języku JavaScript nadawałaby się lepiej od "while" 👇:
for (let i = 0; i < 10; ++i) {
console.log("Licznik: " + i);
}To wszystko! Prawda, że duża zwięzłość w porównaniu z pętlą "while" 😉? Zyskujemy od tej strony, że zmienna modyfikująca licznik jaki się wyświetli w konsoli, jest "wszczepiony" do bloku instrukcji pętli i nie występuje nigdzie poza nim 👍.
Dlatego oprócz zapamiętania i zrozumienia struktury pętli "for", pamiętaj, że najlepiej ją stosować wtedy, gdy mamy wiedzę o wymaganej liczbie iteracji np. liczba argumentów w tablicy 💡. Innymi słowy chodzi o to, żeby pętli "for" używać jak najczęściej w stosunku do instrukcji, w których możemy przewidzieć ile razy powinny się wykonać co do jednostki. Tak to działa ℹ️.
Pętla "for" jest bezcenna, gdy w grę wchodzą tablice i kolekcje, gdyż pozwalają bezboleśnie wykonywać instrukcje dla każdego elementu (rozmiar tablicy = liczba powtórzeń).
A MOŻE JA NIE CHCĘ UŻYWAĆ KTÓREJŚ CZĘŚCI 🙃?
Nie ma sprawy 😊. Możesz pominąć dowolną z trzech "sekcji" w nawiasie pamiętając cały czas o zostawieniu średników w odpowiednich miejscach ⚠️:
let i = 0;
for (; i < 10;) {
// instrukcje
++i;
}Zwracam uwagę na średnik jako na pierwszy znak zaraz po otwierającym nawiasie i na samym końcu! Zauważ, że inkrementacja (++i) została przeniesiona do wewnątrz bloku instrukcji ℹ️! I tylko dlatego pętla zachowa się jak na poprzednim przykładzie ✔️.
Dozwolone jest również całkowite pomięcie wszystkich części pętli 👇:
for (;;) {
// instrukcje
}co sprawi, że pętla zrobi się nieskończona (brak warunku zakończenia oraz modyfikacji wartości co iterację) 😅!
 |
Pętla "for" w języku JavaScript sprawdzi się najlepiej, gdy wiemy ile razy musi się coś wykonać.
To tyle na dziś! Poćwicz sobie na spokojnie, zwłaszcza te kombinacje nieposiadające wszystkich trzech części i nie bój się tych średników 👻. Jeżeli teraz zdarza Ci się potknąć o nie, to któregoś razu napiszesz bezbłędnie 📈. "Practice makes the master." 🏆.