JavaScript: Entendendo a diferença entre map x forEach

3 min readJan 2, 2018

Faz algum tempo que estou focado em estudar JavaScript, e uma das coisas que eu deixei para estudar mais a fundo foi: Qual a diferença entre os métodos: map() e forEach()? Tirando esse item da minha lista de estudos e pensando em compartilhar o que eu achei sobre esse assunto, resolvi escrever esse artigo.

Vamos começar pela definição encontrada no site da Mozilla:

map(): O método map() invoca a função callback passada por argumento para cada elemento do Array e devolve um novo Array como resultado.
foreach(): O método forEach() executa uma dada função em cada elemento de um array.

Em outras palavras o foreach manipula os dados reais de um array e o map cria um novo array.

Exemplo prático

Para que possamos ter um exemplo mais próximo da nossa realidade, dado o array abaixo, qual seria o método mais indicado para apresentar o dobro de cada item desse array, o map ou o foreach?

Para realizar o nosso teste, irei utilizar jsperf, uma ferramenta que nos auxilia nos testes de performance de códigos js.

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30];

ForEach:

arr.forEach((num, index) => {
    return arr[index] = num * 2;
});

Map:

let doubled = arr.map(num => {
    return num * 2;
});

Teste com o jsperf:

O teste que eu irei demonstrar foi realizado no meu computador, caso você tenha interesse em validar no seu computador, segue link do teste: jsPerf Map x Foreach.

Resultado do test map() x forEach():

Como você pode ver, no meu computador o forEach() foi 32% mais lento que o map(). Isso ocorreu porque o forEach alterou todos os valores originais do array, em quanto o Map retornou um novo array com os novos valores não alterando os valores originais.

Mas quando usar o map ou o forEach?

Tudo depende do que nós estamos fazendo, pensando no exemplo anterior o foreach pode ser o mais indicado quando nós não precisamos alterar o valor dos elementos de um array. Quanto ao map(), ele mostrou ser o mais indicado em cenários como no nosso exemplo anterior, onde nós precisamos alterar o valor de um array.

Ainda analisando o nosso exemplo anterior, além do map() ter sido mais rápido que o forEach, ele também nós permite concatenar outros métodos como: filter, reduce … etc. Podemos ver abaixo como podemos adicionar um filter() no nosso exemplo:

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30];let arr2 = arr.map(num => num * 2).filter(num => num < 10);
console.log(arr2);

No exemplo a cima nós adicionamos um filtro que deve retornar os números que foram multiplicados por 2 e são menores que 10.

Resultado: