![](\"https://media.giphy.com/media/3o7527pa7qs9kCG78A/giphy.gif\")
Você está prestes a descobrir as principais diferenças entre o map() e foreach() é como esses ensinamentos me fizeram desenvolver melhor em JavaScript.
Como você sabe, o JavaScript tem alguns métodos que nos ajudam a trabalhar com os arrays. Os mais famosos são o seuArray.map() e seuArray.forEach(), mas esse mundo e maior do que pode ser imaginar, hoje existe mais de 10 métodos que nos auxiliam para trabalhar com arrays em JS 😮 (em um próximo post falo sobre eles).
Mas para quem está iniciando na programação, tem uma certa dificuldade para entender os conceitos e as diferenças entre os dois! E estou aqui para isso, para te ajudar a entender a diferença entre esses dois métodos 😃
\nMétodos que vou abordar nesse post!
\n\n\nO método
\nforEach()executa uma função fornecida uma vez para cada par de chave/valor no objeto Map, pela ordem de inserção. ref.
Por padrão esse método percorre todos os itens de um array, como um loop normal.
\n\n\nO método
\nmap()invoca a função callback passada por argumento para cada elemento do Array e devolve um novo Array como resultado. ref
Na prática o método foreach e map parecem a mesma coisa, mas com a diferença do retorno. O foreach manipula os dados reais de um array e o map cria um novo array.
\nComo falado anteriormente na definição o método forEach() apenas percorre sobre o array, enquanto o map() retornar um novo valor.
const items = [1, 2, 3, 4]\n\nconst values = items.forEach(item => item * item)\n\n// return: undefined\nconsole.log(values)const items = [1, 2, 3, 4]\n\nconst values = items.map(item => item * item)\n\n// return: [1, 4, 9, 16]\nconsole.log(values)Uma diferença importante entre esses dois métodos e a que no map() você consegue desencadear outros métodos, como por exemplo o filter(), sort(), reduce(). Já no foreach() você não tem acesso a esses métodos pois ele não retorna valor.
const items = [1, 2, 3, 4]\n\nitems.forEach(item => item * item).reduce((total, value) => total + value)\n//return: Uncaught TypeError: Cannot read property 'reduce' of undefined\n\nitems.map(item => item * item).reduce((total, value) => total + value)\n//return: value: 30\n\nforEach() não altera a matriz na qual é chamada. (No entanto, callback pode fazê-lo).
\nmap() não altera o array no qual é chamado (embora callback, se chamado, possa fazer isso). ref
\n
Na minha opinião essa definição não e totalmente clara, e um pouco confusa admito.
\nPara saber o que não altera o array original, primeiro temos que verificar como esses dois métodos funcionam.
\nO map() retorna um no array transformados com a mesma quantidade de dados. No caso de forEach(), mesmo que retorne undefined, ele alterará o array original com o callback.
Portanto, vemos claramente que map() depende da imutabilidade e forEach() é um método modificador.
Para você validar a velocidade e desempenho isso depende de várias coisas do computador, a quantidade de dados, processamento, entre outras coisas. Você pode verificar por conta própria com este exemplo abaixo para ver qual é mais rápido.
\nconst items = [1, 2, 3, 4, 5]\n\nconst startForEach = performance.now()\nitems.forEach(x => (x + x) * 10000000000)\n\nconst endForEach = performance.now()\nconsole.log(`Speed [forEach]: ${endForEach - startForEach} miliseconds`)\n\nconst startMap = performance.now()\nitems.map(x => (x + x) * 10000000000)\n\nconst endMap = performance.now()\nconsole.log(`Speed [map]: ${endMap - startMap} miliseconds`)\n//return: value: 30Qual devo utilizar? Como tudo no mundo: Depende. Se você planeja alterar ou usar os dados, é preferível selecionar map(), pois ele retorna um novo array com os dados transformados.
Mas, se você não precisar do array novo, use forEach().
Espero que esse post curtinho tenha te ajudado de alguma maneira!
\n\n\nAs sugestões e críticas são altamente apreciadas.
\n
Se houver mais diferenças, por favor, compartilhe-as nos comentários, caso contrário, obrigado por chegar até aqui 😍.
\n![](\"https://media.giphy.com/media/l2JI1JzL6YS8z5KUM/giphy.gif\")