Pętla for w JavaScript - Pełny przewodnik i przykłady

Pętla for to jeden z tych elementów JavaScript, które bardzo szybko przydają się w realnym kodzie: od przechodzenia po tablicach, przez budowanie list w interfejsie, aż po proste operacje na licznikach. W tym tekście pokazuję, jak działa, jak ją zapisać poprawnie, kiedy wybrać ją zamiast while, for...of albo for...in oraz jakie błędy psują ją najczęściej. Skupię się na praktyce, bo właśnie przy pętli liczy się nie definicja, tylko to, czy kod jest czytelny i działa bez niespodzianek.

Na czym polega pętla for w JavaScript

To konstrukcja do powtarzania tego samego bloku kodu określoną liczbę razy albo do momentu, gdy warunek przestanie być spełniony. Najczęściej używa się jej wtedy, gdy znamy indeks lub zakres iteracji: po tablicy, po ciągu liczb, przy generowaniu listy elementów albo przy przetwarzaniu danych z serwera. Jej przewaga jest prosta: wszystkie trzy elementy sterujące pętlą masz w jednym miejscu, więc od razu widać, od czego startujesz, kiedy kończysz i jak przesuwasz się do następnego kroku.

W praktyce to jedna z najbardziej przewidywalnych konstrukcji w JavaScript. Jeśli chcę szybko ocenić, czy kod jest zdrowy, patrzę właśnie na to, czy licznik, warunek i krok aktualizacji są zapisane jasno, bez sprytnych skrótów. To ważne, bo przy pętli łatwo o błąd o jeden krok za dużo albo za mało, a taki błąd potrafi zepsuć cały wynik. Żeby zobaczyć to bez zgadywania, rozbijmy składnię na części pierwsze.

Jak wygląda składnia i co oznacza każdy element

Konstrukcja pętli składa się z trzech pól w nawiasach: inicjalizacji, warunku i kroku wykonywanego po każdej iteracji. Każde z nich ma inne zadanie, a to właśnie ich kolejność decyduje o tym, czy pętla działa dokładnie tak, jak zakładasz.

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

let i = 0 tworzy licznik, i < 5 sprawdza, czy pętla ma wejść do kolejnej rundy, a i++ zwiększa licznik po każdym przebiegu. Zamiast i++ możesz też użyć i += 2, i -= 1 albo dowolnego kroku, jeśli chcesz przeskakiwać po danych inaczej niż co jeden element.

Warto pamiętać, że wszystkie trzy części są technicznie opcjonalne, ale w praktyce rzadko opłaca się z nich rezygnować. Gdy pominiesz warunek, dostajesz pętlę nieskończoną, więc to rozwiązanie ma sens tylko wtedy, gdy naprawdę kontrolujesz wyjście przez break. Teraz przejdę do tego, w jakiej kolejności przeglądarka wykonuje te kroki.

Jak działa krok po kroku

Logika działania jest prosta, ale opłaca się ją mieć w głowie, bo właśnie tu najłatwiej wyłapać błędy.

1. Najpierw wykonywana jest inicjalizacja, czyli najczęściej ustawienie licznika na startową wartość.
2. Potem JavaScript sprawdza warunek przed wejściem do każdej iteracji.
3. Jeśli warunek jest prawdziwy, uruchamiane jest ciało pętli.
4. Na końcu wykonuje się krok aktualizacji i dopiero wtedy następuje kolejna kontrola warunku.

Ta kolejność tłumaczy wiele pozornie dziwnych zachowań. Gdy w środku pętli użyjesz continue, reszta bieżącej iteracji zostanie pominięta, ale krok aktualizacji i tak się wykona. Z kolei break kończy pętlę od razu, bez kolejnego sprawdzania warunku. Ja zwykle polecam sięgać po te instrukcje wtedy, gdy naprawdę upraszczają kod, a nie jako automatyczny odruch. Jeśli pętla ma pracować na danych, najlepiej pokazać to na konkretnym przykładzie.

Przykłady, które naprawdę przydają się w kodzie

Najlepiej widać sens tej konstrukcji wtedy, gdy wychodzi poza sam licznik. Poniżej pokazuję trzy warianty, które regularnie przewijają się w praktyce front-endowej i w zadaniach szkoleniowych.

Przejście po tablicy z indeksem

const kursy = ["HTML", "CSS", "JavaScript"];

for (let i = 0; i < kursy.length; i++) {
  console.log(`${i + 1}. ${kursy[i]}`);
}

Ten wzorzec jest praktyczny, gdy potrzebujesz numeru elementu, a nie tylko jego wartości. Przy budowaniu list w HTML, numerowaniu kroków instrukcji albo walidacji danych indeks bywa równie ważny jak sama treść.

Sumowanie wartości

const liczby = [4, 8, 15, 16, 23, 42];
let suma = 0;

for (let i = 0; i < liczby.length; i++) {
  suma += liczby[i];
}

console.log(suma);

To dobry przykład sytuacji, w której for daje pełną kontrolę nad przebiegiem. Gdy liczy się prosty, jawny algorytm bez dodatkowych abstrakcji, klasyczna pętla pozostaje bardzo czytelna.

Przeczytaj również: Złożoność obliczeniowa - Czy Twój kod skaluje się dobrze?

Iteracja wstecz albo co kilka kroków

for (let i = 10; i >= 0; i -= 2) {
  console.log(i);
}

Taki zapis przydaje się przy odliczaniu, pracy na elementach od końca albo przy dzieleniu danych na porcje. To też dobry przykład na to, że for nie służy wyłącznie do liczenia od zera do końca tablicy.

Gdy umiesz już czytać takie przykłady, łatwiej porównać tę konstrukcję z innymi sposobami iteracji i wybrać rozwiązanie, które naprawdę pasuje do zadania.

Jak for wypada wobec while, for...of i for...in

Wybór pętli nie powinien być przypadkowy. Sam często patrzę na to, czy ważniejszy jest indeks, warunek, czy może tylko przejście po wartościach. To zwykle szybciej prowadzi do dobrego kodu niż trzymanie się jednej konstrukcji na siłę.

Jeśli iterujesz po tablicy i chcesz tylko wartości, for...of często wygląda lżej. Jeśli potrzebujesz kontroli nad indeksem, warunkiem i krokiem, klasyczne for nadal wygrywa. W przypadku obiektów for...in bywa użyteczne, ale przy tablicach wprowadza więcej zamieszania niż pożytku. Taki wybór konstrukcji oszczędza czas już w trakcie czytania kodu, a nie dopiero podczas debugowania.

Najczęstsze błędy, które psują pętlę

Większość problemów z for nie wynika z samej składni, tylko z drobnych przeoczeń. To dobra wiadomość, bo oznacza, że można ich uniknąć dość szybko.

• i <= array.length zamiast i < array.length to klasyczny błąd o jeden krok. Przy <= ostatnia iteracja wychodzi poza zakres tablicy i dostajesz undefined.
• Brak aktualizacji licznika prowadzi do pętli nieskończonej. Czasem problem jest banalny: i++ wylądowało w złym miejscu albo zostało usunięte przy refaktorze.
• var zamiast let potrafi zaskoczyć zakresem widoczności. W nowym kodzie do licznika używam let, bo to blokowy zakres i mniej niespodzianek.
• for...in użyte do tablicy zwykle kończy się słabym rezultatem, bo ta konstrukcja iteruje po nazwach właściwości, a nie po wartościach.
• Za dużo logiki w ciele pętli sprawia, że kod trudno skontrolować. Jeśli blok robi pięć rzeczy naraz, zwykle warto wyciągnąć część pracy do osobnej funkcji.

Ja najczęściej zaczynam od sprawdzenia dwóch rzeczy: czy granica iteracji jest poprawna i czy licznik na pewno zmienia się w każdym przebiegu. To wystarcza, żeby wyłapać sporą część problemów zanim zaczną się bardziej złożone diagnozy. Dalej chodzi już głównie o czytelność.

Jak pisać pętle, które nadal da się czytać po miesiącu

W praktyce dobra pętla to nie tylko taka, która działa, ale też taka, którą po czasie da się szybko zrozumieć. To ważniejsze, niż wielu początkujących zakłada, bo kod żyje dłużej niż pierwszy commit.

• Używaj czytelnych nazw, gdy sama litera i przestaje wystarczać. W prostych licznikach i jest w porządku, ale przy bardziej opisowych iteracjach lepsze bywa index, row albo day.
• Trzymaj warunek zakończenia blisko licznika. Im mniej rozrzuconej logiki, tym mniejsze ryzyko błędu.
• Nie komplikuj kroku aktualizacji bez potrzeby. Jeśli i += 3 tłumaczy się sam, to dobrze; jeśli wymaga komentarza, rozważ prostszy zapis albo osobny etap obliczeń.
• Wybieraj for...of, jeśli nie potrzebujesz indeksu. Mniej szumu, mniej elementów do śledzenia.
• Gdy ciało pętli rośnie, wyciągnij je do funkcji pomocniczej. Pętla ma sterować powtarzaniem, a nie mieszać w niej pół aplikacji.
• Nie zakładaj, że for zawsze jest szybsze od innych rozwiązań. W realnych projektach o wiele częściej wygrywa czytelność niż mikrooptymalizacja.

Takie podejście zwykle daje lepszy efekt niż szukanie „najbardziej sprytnej” wersji. Jeżeli pętla jest krótka, logiczna i przewidywalna, to później łatwiej ją testować, rozwijać i przenosić do innego fragmentu aplikacji.

Kiedy zwykłe for ma największy sens

Najczęściej wybieram je wtedy, gdy potrzebuję indeksu, niestandardowego kroku albo możliwości przerwania iteracji w dowolnym momencie. To także dobry wybór, gdy uczysz się podstaw i chcesz naprawdę zobaczyć, jak działa mechanika pętli, zamiast ukrywać ją za skrótem składniowym.

Jeśli iteracja ma po prostu przejść po wartościach, bez żadnej dodatkowej kontroli, zwykle czytelniejsze będzie for...of. Gdy masz do czynienia z obiektem, a nie z tablicą, sensowny bywa for...in, ale tylko wtedy, gdy naprawdę chcesz przejrzeć właściwości. W codziennym kodzie klasyczne for nie jest najmodniejsze, ale nadal jest jednym z najbardziej uczciwych narzędzi: pokazuje dokładnie, co ma się wydarzyć i kiedy pętla ma się zatrzymać.

Jeśli zapamiętasz jedną rzecz, niech będzie prosta: trzymaj inicjalizację, warunek i krok aktualizacji w jednym miejscu, a pętla stanie się przewidywalna zamiast męcząca.