JavaScript: Entendendo a diferença entre map x forEach


JavaScript: Entendendo a diferença entre map x forEach

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:

resultado do map() com filter()

Com isso nós finalizamos mais esse artigo. Espero ter ajudado e até um próximo 😉

Referências:

Mozilla: developer.mozilla.org

Brandon Morelli: https://goo.gl/Um9G5B

NWCalvank: https://goo.gl/CXm5Rn

Compartilhe:

Share on facebook
Facebook
Share on twitter
Twitter
Share on pinterest
Pinterest
Share on linkedin
LinkedIn

Table of Contents

Postagens Relacionadas

SaferatHome

Safer at Home

Safer at Home 26/02/2021(US) – Filmes – 0h 0min –   Nota: 0/10   Sinopse     Elenco Mais informações Título Original Safer at Home
SouLunaOUltimoShow

Sou Luna: O Último Show

O elenco de “Sou Luna” se apresenta ao vivo pela última vez no mítico estádio Luna Park em Buenos Aires. Vamos acompanhá-los na intimidade dos bastidores e r…
Chansondouce

Chanson douce

Chanson douce () – Drama, Crime – 1h 40min –   Nota: 6/10   Sinopse     Elenco Leïla Bekhti Como – Myriam Karin Viard
OutpostInfernoNegro

Outpost 2: Inferno Negro

O ano é 1945, 2ª Guerra Mundial, e um cientista alemão de nome Klausener está trabalhando em uma tecnologia nova e assustadora que tem o poder de criar um ex…