const arr = [1, 2, 3, 4, 5]
arr.forEach(i => i);
arr.map(i => i);
Eu gostaria de entender qual a diferença entre os métodos forEach
e map
no JavaScript.
forEach
serve para percorrer o array e fazer alguma coisa com os seus elementos. Mas essa "alguma coisa" não necessariamente precisa retornar algo (tanto que o seu retorno é undefined
). Ex:
const arr = [1, 2, 3, 4, 5];
// só imprime o dobro dos elementos (não retorna nenhum valor)
arr.forEach(e => console.log(e * 2));
No fundo o código acima é só uma forma diferente de se fazer um for
tradicional:
const arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++)
console.log(arr[i] * 2);
map
, por sua vez, faz alguma operação com cada elemento, e retorna outro array contendo o resultado desta operação:
const arr = [1, 2, 3, 4, 5];
// gera outro array contendo o dobro de cada elemento
const dobros = arr.map(e => e * 2);
console.log(dobros); // [2, 4, 6, 8, 10]
Obviamente que map
precisa percorrer o array para poder executar a operação e gerar um novo array contendo os resultados, mas usá-lo somente para percorrer o array é um "uso torto".
Segundo o site da Mozilla:
O método
map()
invoca a funçãocallback
passada por argumento para cada elemento do Array e devolve um novo Array como resultado.[...]
O método map não modifica o array original. No entanto, a função callback invocada por ele pode fazê-lo.
Ainda segundo o mesmo:
O método
forEach()
executa uma dada função em cada elemento de um array.
Em resumo, o método Array.prototype.map()
retorna um novo vetor com as modificações geradas, enquanto o Array.prototype.forEach()
executa as funções no vetor original (tanto que forEach()
retorna undefined
).
Para funções didáticas, vou recriar o funcionamento de ambas funções abaixo.
A função forEach
pode ser "traduzida" como:
function forEach(vetor, funcaoCallback){
for(let x = 0; x < vetor.length; x++){
funcaoCallback(vetor[x]);
}
}
Enquanto a função map()
pode ser "traduzida" como:
function map(vetor, funcaoCallback){
let ans = [];
for(let x = 0; x < vetor.length; x++){
ans.push(funcaoCallback(vetor[x]));
}
return ans
}
Ambos possuem outras diferenças, como velocidade, e demais aspectos técnicos, como visto nos links abaixo:
angular.forEach
, que apesar de parecido, não é exatamente igual aoforEach
nativo do JavaScript: stackoverflow.com/a/39212839 - Apesar do funcionamento geral ser o mesmo para arrays, achei melhor responder em vez de indicar a duplicata...Array.prototype.forEach()
é completamente diferente doangular.forEach()