Iteracja po tablicy w Javascript

Wstęp

Język javascript pozwala na iterację po tablicy na naprawdę wiele sposobów. W tym artykule przedstawię ci najpopularniejsze z nich oraz omówię ich wady i zalety.

for

Plusy:

• działa praktycznie wszędzie, nawet na najstarszych przeglądarkach (jeżeli zamiast const i let użyjesz var)
• można użyć break i continue (w celu zatrzymania iteracji)

Minusy:

• łatwo o pomyłkę (np. zamiast i < tablica.length wpisując i <= tablica.length)
• dużo możliwych wariantów implementacji tej samej funkcjonalności - zobacz poniżej

Jest powiedzenie "Od przybytku głowa nie boli!", jednak w kontekście programowania i pracy w większym zespole to powiedzenie nie ma zastosowania.

Z mojego doświadczenia wynika, że nadmiar możliwości prowadzi do braku spójności, a to z kolei prowadzi do ciężkiego bólu głowy 😉.

forEach

Plusy:

• krótko i zwięźle
• ciężko o błąd

Minusy:

• nie można użyć break lub continue, co oznacza, że zawsze musimy przejść przez całą tablicę

for...of (ES6)

Plusy:

• można użyć break i continue
• nadal krótsze i mniejsza szansa na popełnienie błędu niż w przypadku zwykłej pętli for
• ma zastosowanie nie tylko dla tablic

Minusy:

• skoro ES6, to znaczy, że starsze przeglądarki nie obsłużą tej konstrukcji (chyba że użyjesz transkompilatora).

Nie używaj for...in !

Ta metoda została stworzona z myślą o obiektach. Pomimo, że działa także na tablicach, to lepiej jej unikać, gdyż:

• kolejność iteracji nie jest zagwarantowana
• odziedziczone właściwości również zostaną wzięte pod uwagę - zobacz przykład poniżej

Podsumowanie

Który sposób jest najlepszy? Oczywiście zależy to od okoliczności, ale jako domyślny wybór zalecam:

1. forEach w przypadku gdy chcesz przejść przez całą zawartość tablicy (np. chcesz wyświetlić listę wszystkich uczniów)
2. for...of w przypadku gdy chcesz w pewnym momencie przerwać iterację (np. chcesz wyświetlić listę TOP 10 uczniów z najlepszą średnią ocen)
3. for tylko w przypadku gdy twój kod musi koniecznie działać na mocno już przestarzałych wersjach przeglądarek i nie używasz transkompilatora, który uzupełniałby brak wspracia dla for...of lub forEach

Iterację po tablicy masz już w małym palcu! Gratulacje!

A co jeśli najdzie cię potrzeba na iterację po obiekcie? Spokojnie, ten temat omówiłem w osobnym artykule: Iteracja po obiekcie w języku javascript.