Praktyczne zastosowania metody forEach w JavaScript

Ewa Klimowicz

3 października, 2023

3 min

• Specjalizacja
• JavaScript

Ostatnia aktualizacja 3 października, 2023

JavaScript to jeden z najpopularniejszych języków programowania Jest używany w różnorodnych kontekstach, od rozwoju stron internetowych po tworzenie zaawansowanych aplikacji. Jednym z najbardziej użytecznych narzędzi, które oferuje JavaScript, jest metoda forEach. Pozwala ona na iterację przez elementy tablicy w sposób efektywny i elastyczny. W poniższym tekście przyjrzymy się bliżej tej metodzie, zrozumiemy jej zastosowania i dowiemy się, dlaczego jest tak popularna.

JavaScript forEach – na czym polega ta metoda?

Metoda forEach pozwala na wykonanie określonej funkcji dla każdego elementu w tablicy. Jest to niezwykle przydatne w wielu scenariuszach, np. w manipulacji danymi czy też generowaniu dynamicznego kodu HTML.

const liczby = [1, 2, 3, 4, 5];
liczby.forEach(function(liczba) {
  console.log(liczba + 1);
});

W powyższym kodzie utworzono tablicę o nazwie liczby, która zawiera pięć elementów: 1, 2, 3, 4 i 5. Następnie wprowadzono metodę forEach, która służy do iteracji przez każdy element tej tablicy.

Metoda forEach przyjmuje jako argument funkcję, która zostanie wykonana dla każdego elementu tablicy. W tym przypadku funkcja ta przyjmuje pojedynczy argument liczba, który reprezentuje aktualny element tablicy podczas iteracji.

Wewnątrz funkcji użyto instrukcji console.log, która wyświetla wartość liczba + 1 w konsoli. Oznacza to, że dla każdego elementu tablicy, jego wartość zostanie zwiększona o 1, a następnie wyświetlona w konsoli.

W efekcie kod wyświetli w konsoli kolejno liczby: 2, 3, 4, 5 i 6. Każda z tych liczb jest wynikiem dodania 1 do odpowiadającego jej elementu oryginalnej tablicy liczby.

Dalsza część tekstu znajduje się pod materiałem wideo:

JavaScript forEach – elastyczność i bezpieczeństwo

Jednym z ważnych aspektów metody forEach jest to, że nie modyfikuje ona oryginalnej tablicy, a działa na kopii elementów. Oznacza to, że możesz bezpiecznie używać tej metody bez obaw o zmianę oryginalnych danych.

Inne metody iteracji

Warto również zauważyć, że metoda forEach nie jest jedyną metodą do iteracji przez tablice w JavaScript. Istnieją inne metody, np. map, filter, reduce, które również są bardzo użyteczne i mają swoje własne, unikalne zastosowania.

Metoda map

Map tworzy nową tablicę, zawierającą wyniki wywołania podanej funkcji dla każdego elementu oryginalnej tablicy.

const liczby = [1, 2, 3, 4, 5];
const liczbyPlusJeden = liczby.map(function(liczba) {
  return liczba + 1;
});
console.log(liczbyPlusJeden); // Wyświetli [2, 3, 4, 5, 6]

Metoda filter

Filter tworzy nową tablicę, zawierającą tylko te elementy oryginalnej tablicy, które spełniają warunek określony w funkcji.

const liczby = [1, 2, 3, 4, 5];
const liczbyWiekszeOdTrzech = liczby.filter(function(liczba) {
  return liczba > 3;
});
console.log(liczbyWiekszeOdTrzech); // Wyświetli [4, 5]

Metoda reduce

Reduce redukuje tablicę do pojedynczej wartości. Przyjmuje funkcję, która jest wywoływana dla każdego elementu tablicy, oraz wartość początkową akumulatora.

const liczby = [1, 2, 3, 4, 5];
const suma = liczby.reduce(function(akumulator, liczba) {
  return akumulator + liczba;
}, 0);
console.log(suma); // Wyświetli 15

Czytaj także:

Funkcje JavaScript wykonują określone zadania w aplikacji. Sprawdź, jak ich używać

Tablice C++ ułatwiają organizację danych. Przykłady kodu