map() vs forEach()
map() buduje nową tablicę z wyników funkcji, a forEach() tylko wywołuje funkcję dla każdego elementu i zawsze zwraca undefined.
Porównanie w tabeli
#Co zwraca
- Array.prototype.map()
- Nową tablicę z wynikami funkcji
- Array.prototype.forEach()
undefined
Długość wyniku
- Array.prototype.map()
- Zawsze taka sama jak tablicy wejściowej
- Array.prototype.forEach()
- Brak wyniku
Zmienia oryginalną tablicę
- Array.prototype.map()
- Nie, chyba że robi to sama funkcja
- Array.prototype.forEach()
- Nie, chyba że robi to sama funkcja
Łączenie w łańcuch
- Array.prototype.map()
- Tak, np.
.map().filter().join() - Array.prototype.forEach()
- Nie, bo zwraca
undefined
Przerwanie w połowie
- Array.prototype.map()
- Niemożliwe
- Array.prototype.forEach()
- Niemożliwe,
breaknie działa (użyjfor...of)
Typowe użycie
- Array.prototype.map()
- Przekształcanie danych, renderowanie list w React
- Array.prototype.forEach()
- Logowanie, zapisywanie, zmiany na stronie
Przykład
#const prices = [10, 20, 30]
const doubled = prices.map((price) => price * 2)
const result = prices.forEach((price) => console.log(price))
console.log(doubled)
console.log(result)Definicja i zastosowanie
#Obie metody przechodzą po kolejnych elementach tablicy i dla każdego wywołują tę samą funkcję z argumentami (element, index, array). Różni je to, co dzieje się z wynikiem: map() zbiera wartości zwrócone przez funkcję w nową tablicę tej samej długości, a forEach() je ignoruje i zawsze zwraca undefined.
Wybór jest więc prosty. Gdy chcesz przekształcić dane i dalej korzystać z wyniku (ceny z podatkiem, lista imion, elementy listy w React), użyj map(). Gdy chcesz tylko wykonać efekt uboczny dla każdego elementu (wypisać go w konsoli, zapisać, zmienić element na stronie), użyj forEach().
Wydajność nie jest tu kryterium, bo w praktyce obie metody działają tak samo szybko. Liczy się czytelność: map(), której wyniku nikt nie używa, sugeruje pomyłkę, a forEach() z push() do osobnej tablicy to dłuższa wersja map().
Składnia
#const result = array.map((element, index, array) => newValue)
array.forEach((element, index, array) => { /* efekt uboczny */ })Więcej przykładów
#const students = [
{ name: 'Ania', points: 120 },
{ name: 'Kuba', points: 95 },
{ name: 'Ola', points: 140 }
]
const summary = students
.map((student) => `${student.name}: ${student.points}`)
.join(', ')
console.log(summary)const names = ['ania', 'kuba']
const upperWithForEach = []
names.forEach((name) => upperWithForEach.push(name.toUpperCase()))
const upperWithMap = names.map((name) => name.toUpperCase())
console.log(upperWithForEach)
console.log(upperWithMap)Wynik jest ten sam, ale wersja z map() jest krótsza i nie wymaga pustej tablicy na start.
const scores = [40, 75, 90, 20]
for (const score of scores) {
if (score > 80) {
console.log('Pierwszy wynik powyżej 80:', score)
break
}
}Dobre praktyki
#- Jeśli nie używasz tablicy zwróconej przez
map(), zamień ją naforEach()albo pętlęfor...of. - Z
awaitnie używajforEach(): pętla nie czeka na obietnice. Sięgnij pofor...ofalboawait Promise.all(array.map(...)). - Szukasz jednego elementu albo sprawdzasz warunek?
find(),some()ievery()kończą pracę wcześniej niżforEach().
Powiązane hasła
#- Array.prototype.map()Tworzy nową tablicę z wynikami wywołania funkcji dla każdego elementu.
- Array.prototype.forEach()Wywołuje funkcję dla każdego elementu tablicy.
- for...ofPrzechodzi po kolejnych wartościach obiektu iterowalnego: tablicy, napisu, Map, Set i innych.
- Array.prototype.filter()Tworzy nową tablicę z elementami, dla których funkcja zwróciła true.
Widzisz błąd albo brakuje przykładu? Napisz do nas.