JS koncept - for...of, for...in, forEach

Poznajemy trzy podobne do siebie pętle – for…of, for…in oraz forEach. Zakładam, że znamy już te podstawowe pętle w JS (for, while, może do-while) zaś forEach, for…of i for…in albo nie znamy, albo mylą nam się ze sobą niesamowicie i staramy się ich unikać.

Po przeczytaniu tego artykułu powinniśmy nabrać wreszcie pewnej jasności czym są te pętle i kiedy ich używać.

JS posiada ogromną ilość różnych pętli, które możemy zastosować na tablicach.

Pętla for…of przechodzi przez każdy element tablicy:

<script>
        const array1 = ['a', 'b', 'c'];
        for (const element of array1) {
        console.log(element);
        }
        //a
        //b
        //c
    </script>

Pętla for…in przechodzi po każdym indeksie tablicy:

<script>
        const array1 = ['a', 'b', 'c'];
        for (const idx in array1) {
        console.log(idx);
        }
        //0
        //1
        //2
    </script>

Jeżeli trudno nam to wszystko zapamiętać – skojarzmy sobie 'in’ z 'INDEKSEM’ w głowie – powinno pomóc.

Oczywiście „po indeksie” możemy te elementy „złapać”:

<script>
        const array1 = ['a', 'b', 'c'];
        for (const idx in array1) {
        console.log(array1[idx]);
        }
        //a
        //b
        //c
    </script>

Pętla/metoda forEach pozwala nam wywołać jakąś funkcję na każdym elemencie tablicy:

<script>
        const array1 = ['a', 'b', 'c'];
        array1.forEach((el) => {
        console.log(el.toUpperCase());
        });
        //A
        //B
        //C
    </script>

Używając forEach możemy uzyskać dostęp i do elementów i do ich indeksów:

<script>
        const array1 = ['a', 'b', 'c'];
        array1.forEach((el, idx) => {
        console.log(el, idx);
        });
        //a 0
        //b 1
        //c 2
    </script>

Możemy nawet uzyskać dostęp do elementów, indeksów i całej tablicy:

<script>
        const array1 = ['a', 'b', 'c'];
        array1.forEach((el, idx, arr) => {
        console.log(el, idx, arr);
        });
        //a 0 ['a', 'b', 'c']
        //b 1 ['a', 'b', 'c']
        //c 2 ['a', 'b', 'c']
    </script>

Pętla for…in przydaje się zaś do iterowania po obiektach. W przypadku tablic zwracała indeksy, zaś w przypadku obiektów zwraca ich klucze:

<script>
        let person = {
        name: "John",
        age: 20
        }
        for(const key in person) {
          console.log(key, person[key]);
        }
        //name John
        //age 20
    </script>

A w czym może „błyszczeć” for…of? Cóż, forEach to metoda tablic, zaś for…of pozwala iterować po wszystkich obiektach tablicopodobnych, na przykład po zbiorach:

const iterable = new Set([1, 1, 2, 2, 3, 3]);

for (const value of iterable) {
  console.log(value);
}
// 1
// 2
// 3

Podsumowanie

forEach to metoda tablicy
forEach wykonuje callback (funkcję) na każdym elemencie tablicy
callback może przyjąć argumenty: element, element oraz indeks, element oraz indeks i cała tablica
for…of iteruje po elementach tablic oraz obiektów tablico-podobnych, co jest ogromną zaletą tej pętli
for…in iteruje po indeksach tablic oraz kluczach obiektów (i to jest jej ogromna zaleta).

Zazwyczaj do przechodzenia po tablicach używamy forEach. Do obiektów tablico-podobnych – for…of. Do przechodzenia po obiektach (tj. ich kluczach i wartościach, które po kluczu możemy uzyskać) – for…in.

JS koncept – for…of, for…in, forEach

Podsumowanie