Pętle w JavaScript

1. Wprowadzenie

Pętla (ang. loop) to struktura kontrolna, która pozwala wielokrotnie wykonywać ten sam blok kodu, dopóki spełniony jest określony warunek.

Pętle są niezwykle przydatne, gdy chcemy: * powtarzać operacje określoną liczbę razy, * iterować po elementach tablicy lub obiektu, * wykonywać kod, dopóki warunek jest prawdziwy, * przetwarzać dane w kolekcjach.

JavaScript oferuje kilka typów pętli, z których każda ma swoje zastosowanie.

2. Typy pętli w JavaScript

  1. for – klasyczna pętla z licznikiem
  2. while – pętla z warunkiem na początku
  3. do...while – pętla z warunkiem na końcu
  4. for...of – iteracja po wartościach (tablice, stringi)
  5. for...in – iteracja po kluczach (obiekty, tablice)
  6. forEach() – metoda tablicowa (nie jest pętlą, ale służy do iteracji)

3. Pętla for

Klasyczna pętla z licznikiem – najczęściej używana, gdy znamy liczbę iteracji.

Składnia:

Elementy pętli:

Element Opis
inicjalizacja Tworzenie zmiennej licznika (np. let i = 0)
warunek Warunek kontynuacji pętli (np. i < 5)
inkrementacja Zmiana licznika po każdej iteracji (np. i++)

Przykład podstawowy:

Iteracja po tablicy:

Pętla wsteczna:

4. Pętla while

Wykonuje kod dopóki warunek jest prawdziwy. Warunek sprawdzany jest przed każdą iteracją.

Składnia:

Przykład:

Uwaga – pętla nieskończona:

Jeśli warunek nigdy nie stanie się fałszywy, pętla będzie działać w nieskończoność:

5. Pętla do...while

Podobna do while, ale warunek sprawdzany jest po wykonaniu kodu. Oznacza to, że kod wykona się przynajmniej raz, nawet jeśli warunek jest od razu fałszywy.

Składnia:

Przykład:

Różnica między while a do...while:

6. Pętla for...of

Służy do iteracji po wartościach w kolekcjach takich jak tablice, stringi, mapy, sety.

Składnia:

Przykład z tablicą:

Przykład z stringiem:

Zalety for...of: * Prostsza składnia niż for * Nie wymaga licznika * Czytelniejsza w przypadku tablic

7. Pętla for...in

Służy do iteracji po kluczach (właściwościach) obiektu lub indeksach tablicy.

Składnia:

Przykład z obiektem:

Przykład z tablicą (niezalecane):

Uwaga: Dla tablic lepiej używać for...of lub forEach().

8. Porównanie pętli

Pętla Zastosowanie Przykład
for Znana liczba iteracji for (let i = 0; i < 10; i++)
while Warunek na początku while (x < 10)
do...while Wykonanie przynajmniej raz do { ... } while (x < 10)
for...of Iteracja po wartościach (tablice) for (let item of array)
for...in Iteracja po kluczach (obiekty) for (let key in object)

9. Słowa kluczowe break i continue

9.1 break – przerwanie pętli

Natychmiast kończy działanie pętli.

9.2 continue – pominięcie iteracji

Pomija bieżącą iterację i przechodzi do następnej.

10. Zagnieżdżone pętle

Pętle można zagnieżdżać – umieszczać jedną pętlę wewnątrz drugiej.

Przykład – tablica dwuwymiarowa:

Uwaga: Zagnieżdżone pętle mogą wpływać na wydajność – unikaj zbyt głębokich zagnieżdżeń.

11. Pętla forEach() (metoda tablicowa)

forEach() to metoda tablicy, która wykonuje funkcję dla każdego elementu.

Składnia:

Przykład:

Uwaga: forEach() nie pozwala na użycie break ani continue.

12. Kiedy używać której pętli?

Sytuacja Rekomendowana pętla
Znana liczba iteracji for
Iteracja po tablicy for...of, forEach()
Iteracja po obiekcie for...in
Warunek przed iteracją while
Kod musi wykonać się przynajmniej raz do...while
Transformacja tablicy map(), filter()

13. Przykłady praktyczne

Suma elementów tablicy:

Szukanie elementu:

Wypisanie liczb parzystych:

14. Pułapki i częste błędy

Nieskończona pętla:

Modyfikacja tablicy podczas iteracji:

Używanie for...in dla tablic:

Rozwiązanie: Używaj for...of lub forEach() dla tablic.

15. Dobre praktyki

  • Używaj for...of zamiast klasycznej pętli for dla tablic (czytelniejsze)
  • Używaj for...in tylko dla obiektów, nie dla tablic
  • Unikaj modyfikowania kolekcji podczas iteracji
  • Zawsze pamiętaj o warunku zakończenia pętli
  • Preferuj metody funkcyjne (map, filter, reduce) zamiast pętli, gdy to możliwe
  • Używaj czytelnych nazw zmiennych (np. fruit zamiast x)

16. Podsumowanie

Pętla Kiedy używać Przykład
for Znana liczba iteracji for (let i = 0; i < 10; i++)
while Warunek przed iteracją while (x < 100)
do...while Wykonanie przynajmniej raz do { ... } while (x < 10)
for...of Iteracja po wartościach (tablice, stringi) for (let item of array)
for...in Iteracja po kluczach (obiekty) for (let key in object)
forEach() Metoda tablicowa array.forEach(item => ...)

17. Wnioski

  • Pętle są fundamentalnym narzędziem do powtarzania operacji w JavaScript.
  • Każdy typ pętli ma swoje zastosowanie – wybór zależy od sytuacji.
  • for...of to nowoczesny i czytelny sposób iteracji po tablicach.
  • Zawsze pamiętaj o warunku zakończenia, aby uniknąć nieskończonych pętli.
  • W nowoczesnym JavaScript często metody funkcyjne (map, filter) są bardziej eleganckie niż tradycyjne pętle.

Podsumowanie praktyczne:

Opanowanie pętli jest kluczowe dla każdego programisty. Używaj for...of dla tablic, for...in dla obiektów, a while gdy nie znasz liczby iteracji. Zawsze dbaj o czytelność i wydajność kodu.

Wróć do spisu lekcji Rozwiąż quiz