Pętla for to w programowaniu sposób na powtórzenie tej samej czynności określoną liczbę razy, bez przepisywania kodu wiele razy. Składa się z trzech części: od czego zaczynamy liczyć, dopóki co powtarzamy oraz co robimy po każdym powtórzeniu. Na przykład pętla for (let i = 1; i <= 5; i++) wykona zadany kod pięć razy, za każdym razem zwiększając licznik i o jeden.
Wyobraź sobie, że masz rozwiesić plakaty na 10 klatkach schodowych. Nie spisujesz sobie instrukcji „idź do klatki pierwszej, powieś plakat, idź do klatki drugiej, powieś plakat…” dziesięć razy. Mówisz po prostu: „powtórz to dziesięć razy”. Dokładnie tak działa pętla w programowaniu – a pętla for to najpopularniejszy jej rodzaj. Ten artykuł jest napisany tak, żeby zrozumiała go także osoba, która nigdy nie widziała kodu.
Co to jest pętla w programowaniu?
Pętla to polecenie, które każe komputerowi powtarzać tę samą czynność – kilka, kilkaset albo kilka milionów razy. Komputer nie nudzi się i nie męczy, więc powtarzanie to jedna z rzeczy, w których jest najlepszy. Człowiek, który musiałby ręcznie wykonać tę samą operację tysiąc razy, popełniłby po drodze błędy albo po prostu by zrezygnował.
Pętle znasz z życia codziennego, tylko nie nazywasz ich tak:
- bieganie po bieżni: „biegnij, dopóki nie zrobisz 5 okrążeń”,
- rozdawanie ulotek: „daj ulotkę każdej osobie w kolejce”,
- przeglądanie zakupów: „sprawdź każdy produkt na liście, czy jest w koszyku”.
W każdym z tych przykładów pojawia się to samo: czynność, która się powtarza, oraz zasada, kiedy to powtarzanie się kończy.
Czym jest pętla for?
Pętla for przydaje się wtedy, gdy z góry wiesz, ile razy coś ma się powtórzyć – albo przynajmniej wiesz, przez ile elementów trzeba przejść. Najłatwiej ją zrozumieć na przykładzie licznika okrążeń na bieżni. Żeby wszystko działało, odpowiadasz sobie na trzy pytania:
| Pytanie | Jak to się nazywa w programowaniu | Przykład z bieżnią |
|---|---|---|
| Od czego zaczynam liczyć? | wartość początkowa | zaczynam od okrążenia numer 1 |
| Dopóki co powtarzam? | warunek | powtarzam, dopóki numer okrążenia nie przekroczy 5 |
| Co robię po każdym powtórzeniu? | krok | zwiększam licznik o 1 |
Pętla for to po prostu sposób, by zapisać odpowiedzi na te trzy pytania w jednym miejscu, a potem powiedzieć komputerowi, co ma zrobić w każdym powtórzeniu.
Jak wygląda pętla for w kodzie?
Zobacz poniższy przykład. Nie musisz od razu wszystkiego rozumieć – za chwilę rozbierzemy go na części:
for (let i = 1; i <= 5; i++) {
console.log('Okrążenie numer ' + i);
}
Ten kod wyświetli pięć linijek: „Okrążenie numer 1”, „Okrążenie numer 2” i tak dalej, aż do piątego. Przetłumaczmy go na język ludzki:
| Fragment kodu | Co to znaczy po ludzku |
|---|---|
for | „powtarzaj” – słowo, które mówi komputerowi, że zaczyna się pętla |
let i = 1 | „stwórz licznik o nazwie i i ustaw go na 1” |
i <= 5 | „powtarzaj, dopóki licznik jest mniejszy lub równy 5” |
i++ | „po każdym powtórzeniu zwiększ licznik o 1” |
console.log(...) | „wyświetl tekst w konsoli” – specjalnym okienku, w którym programiści widzą wyniki swojego kodu |
{ ... } | nawiasy klamrowe zamykają to, co ma się powtarzać |
Słowo let oznacza, że tworzysz zmienną, czyli coś w rodzaju pudełka z etykietą, w którym przechowujesz wartość. Nasze pudełko nazywa się i i trzyma aktualny numer okrążenia. Zapis i++ to skrót od „zwiększ wartość w pudełku i o jeden”.
Jak działa pętla for krok po kroku?
Komputer wykonuje nasz przykład zawsze w tej samej kolejności. Najpierw ustawia licznik na wartość początkową, a potem powtarza trzy czynności: sprawdza warunek, wykonuje polecenia z nawiasów klamrowych i zwiększa licznik. Gdy warunek przestaje być prawdziwy, pętla się kończy:
| Powtórzenie | Wartość licznika i | Czy i <= 5? | Co się dzieje |
|---|---|---|---|
| 1 | 1 | tak | wyświetla „Okrążenie numer 1”, potem i zwiększa się do 2 |
| 2 | 2 | tak | wyświetla „Okrążenie numer 2”, potem i zwiększa się do 3 |
| 3 | 3 | tak | wyświetla „Okrążenie numer 3”, potem i zwiększa się do 4 |
| 4 | 4 | tak | wyświetla „Okrążenie numer 4”, potem i zwiększa się do 5 |
| 5 | 5 | tak | wyświetla „Okrążenie numer 5”, potem i zwiększa się do 6 |
| – | 6 | nie | warunek nie jest spełniony, pętla się kończy |
Zwróć uwagę, że warunek jest sprawdzany przed każdym powtórzeniem. Dlatego gdy licznik osiągnie 6, komputer nie wykona już szóstego okrążenia – po prostu przejdzie do dalszej części programu.
Jak samodzielnie uruchomić pętlę for?
Nie musisz niczego instalować. Każda przeglądarka ma wbudowaną konsolę, w której możesz uruchamiać kod JavaScript:
- Otwórz dowolną stronę w przeglądarce Chrome.
- Naciśnij
Ctrl + Shift + J(Windows) lubCmd + Option + J(macOS). W innych przeglądarkach kliknij prawym przyciskiem myszy, wybierz „Zbadaj” i przejdź do zakładki „Konsola”. - Wklej kod z poprzedniego przykładu i naciśnij Enter.
Spróbuj zmienić liczbę 5 na 10 albo tekst „Okrążenie numer” na własny. Eksperymentowanie to najlepszy sposób, żeby zrozumieć, co robi każdy fragment.
Do czego przydaje się pętla for w praktyce?
W prawdziwych programach pętle są wszędzie. Dzięki nim sklep internetowy wyświetla listę produktów, system wysyła przypomnienie do każdego klienta, a koszyk sumuje ceny wszystkich wybranych rzeczy. Zobaczmy ten ostatni przykład:
const prices = [20, 15, 30];
let sum = 0;
for (let i = 0; i < prices.length; i++) {
sum += prices[i];
}
console.log(sum); // 65
W pierwszej linijce tworzymy listę trzech cen (w programowaniu nazywamy ją tablicą). Pętla przechodzi po kolei przez każdą z nich i dodaje ją do zmiennej sum, która na początku wynosi zero. Zapis prices[i] oznacza „cena o numerze i z listy”, a prices.length to liczba elementów na liście – w naszym przypadku 3. Po przejściu przez wszystkie trzy ceny w konsoli zobaczysz wynik: 65.
Dlaczego w programowaniu liczymy od zera?
W poprzednim przykładzie licznik zaczął od 0, a nie od 1. Tak jest w większości języków programowania i na początku wydaje się dziwne, ale można to porównać do linijki: jej początek to 0 centymetrów, a nie 1. Pierwszy element listy jest „zero kroków od początku”, drugi – „jeden krok od początku” i tak dalej. Dlatego trzy ceny mają numery 0, 1 i 2, a warunek i < prices.length (czyli „mniej niż 3”) zatrzymuje pętlę dokładnie po ostatniej z nich.
Czym różni się pętla for od pętli while?
Obie powtarzają czynności, ale różnią się sposobem myślenia. W pętli for wiesz z góry, ile razy coś się powtórzy, albo przez ile elementów przejdziesz: „zrób 10 pompek”. W pętli while powtarzasz, dopóki coś jest prawdą, i nie musisz wiedzieć, ile to potrwa: „pij wodę, dopóki nie ugasisz pragnienia”.
let glasses = 0;
while (glasses < 3) {
console.log('Wypijam szklankę wody');
glasses++;
}
Pętlę for możesz zawsze zapisać jako while i odwrotnie, ale w praktyce wybiera się tę, która w danej sytuacji lepiej oddaje intencję i jest czytelniejsza.
Jakie błędy najczęściej popełniają początkujący?
Pętle są proste w założeniu, ale kilka pułapek zaskakuje niemal każdego na początku nauki:
| Błąd | Co się dzieje | Jak go uniknąć |
|---|---|---|
Nieskończona pętla, np. for (let i = 1; i <= 5; i--) | licznik zmniejsza się zamiast rosnąć, więc warunek zawsze jest prawdziwy i program się zawiesza | sprawdź, czy krok przybliża licznik do końca warunku |
Pomyłka o jeden (ang. off-by-one), np. i <= prices.length zamiast i < prices.length | pętla wykonuje o jedno powtórzenie za dużo, sięga po nieistniejący element i zamiast ceny dostajesz undefined, a suma przyjmuje wartość NaN | pamiętaj, że elementy liczymy od zera, więc ostatni ma numer o jeden mniejszy niż długość listy |
Zapomniany krok, czyli brak i++ | licznik się nie zmienia, więc pętla nigdy się nie kończy | po napisaniu pętli „przejdź” po niej w głowie dwa-trzy powtórzenia, tak jak w tabeli powyżej |
Jeśli uruchomisz nieskończoną pętlę i karta przeglądarki przestanie odpowiadać, po prostu zamknij ją i otwórz od nowa – nic się nie stanie.
Czy pętla for wygląda tak samo w innych językach programowania?
Sam pomysł jest wszędzie ten sam, zmienia się tylko zapis. Poniższa tabela pokazuje pętlę, która pięć razy powtarza czynność:
| Język | Zapis pętli for |
|---|---|
| JavaScript | for (let i = 1; i <= 5; i++) { ... } |
| PHP | for ($i = 1; $i <= 5; $i++) { ... } |
| Python | for i in range(1, 6): (zakres kończy się tuż przed 6) |
Jeśli rozumiesz, jak działa pętla w jednym języku, w innym wystarczy nauczyć się nowego zapisu.
Co dalej po zrozumieniu pętli for?
Klasyczna pętla for nie jest jedynym sposobem na powtarzanie czynności. W JavaScripcie do przechodzenia po elementach listy powstały wygodniejsze wersje, które opisałem w artykule o tym, czym różni się pętla for of od for in. Jeśli chcesz zobaczyć zupełnie inny sposób na powtarzanie kodu, przeczytaj o rekurencji jako alternatywie dla pętli.
