7
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.

5

2 Respostas 2

11

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".

3
  • 2
    Quando aparece uma pergunta respondível sempre tem alguém mais rápido do que eu. Commented 13/12/2019 às 19:39
  • 2
    @AugustoVasques Eu dei sorte, entrei no site e dei de cara com a pergunta :-)
    – hkotsubo
    Commented 13/12/2019 às 19:41
  • 2
    @hkotsubo eu perdi tempo com as referências hehehehe ;p Commented 13/12/2019 às 19:50
6

Segundo o site da Mozilla:

O método map() invoca a função callback 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:

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .