forEach vs map: Como e quando usar cada um em JavaScript

Qual a diferença entre forEach e map?

Em JavaScript, tanto forEach() quanto map() são métodos usados para iterar sobre os elementos de um array. Ambos os métodos chamam uma função de callback para cada item do array, mas existem diferenças fundamentais no comportamento e no retorno de cada um. Saber quando usar cada um pode ajudar a escrever um código mais eficiente e legível.

Método forEach()

O método forEach() executa uma função para cada item de um array, mas não retorna nada. Ou seja, ele é utilizado para executar uma ação em cada item do array sem modificar ou retornar um novo array. Ele é útil quando você precisa realizar uma operação ou efeito colateral (como modificar um elemento fora do array ou exibir um valor), mas não precisa de um valor de retorno.

Exemplo de código com forEach():

let frutas = ['maçã', 'banana', 'laranja'];
frutas.forEach(function(fruta) {
  console.log(fruta);
});

Neste exemplo, forEach() imprime cada elemento do array frutas no console. Não há um novo array criado, nem um valor retornado. O método simplesmente executa a função callback para cada elemento.

Características do forEach()

• Não retorna um novo array: Apenas executa a função callback para cada item.
• Usado para efeitos colaterais: Ideal quando você deseja realizar uma ação, como exibir valores ou modificar variáveis externas, sem modificar o array original.
• Não pode ser interrompido: Não é possível usar break ou return para sair do laço forEach() antes que ele termine a iteração.

Método map()

O método map(), por outro lado, é usado quando você deseja transformar os elementos de um array e criar um novo array com os resultados da transformação. Ele aplica uma função de callback a cada elemento do array original e retorna um novo array com os resultados da função, sem modificar o array original.

Exemplo de código com map():

let numeros = [1, 2, 3, 4, 5];
let quadrados = numeros.map(function(numero) {
  return numero * numero;
});
console.log(quadrados);  // Exibe [1, 4, 9, 16, 25]

Aqui, o map() cria um novo array quadrados, onde cada elemento é o quadrado do número correspondente no array original. A principal diferença é que o map() sempre retorna um novo array com os resultados.

Características do map()

• Retorna um novo array: Cria e retorna um novo array com os resultados da transformação.
• Usado para transformar dados: Ideal quando você precisa modificar os dados do array de forma funcional e retornar um novo array com os resultados.
• Não altera o array original: O array original permanece intacto, e apenas um novo array é criado.

Comparando forEach() e map()

Quando usar forEach() ou map()?

• Use forEach() quando você não precisa de um valor de retorno e deseja realizar ações como modificar variáveis fora do array, ou para exibir ou imprimir valores.
• Use map() quando você precisa transformar os dados do array e criar um novo array com os resultados da transformação, sem alterar o array original.

Conclusão

Enquanto forEach() é útil para realizar ações em elementos de um array sem a necessidade de retornar um novo array, map() é ideal quando você precisa criar um novo array com dados transformados. Ambos são essenciais para a iteração sobre arrays em JavaScript, e escolher o método certo depende do seu caso de uso e da necessidade de transformar ou apenas percorrer os elementos.

Quando usar forEach() e quando usar map() para iterar arrays em JavaScript?

A escolha entre forEach() e map() depende do objetivo do seu código. Se o seu objetivo é modificar os elementos de um array sem a necessidade de retornar um novo array, o forEach() é uma boa opção. No entanto, se você precisa transformar os elementos de um array e obter um novo array com esses resultados, o map() é a escolha certa. Compreender como e quando usar cada um desses métodos ajuda a escrever código mais eficiente e legível, aproveitando ao máximo as funcionalidades de JavaScript.

Algumas aplicações:

• Use forEach() quando você precisar percorrer um array e realizar ações (como logar valores) sem modificar o array original.
• Use map() quando você precisar transformar dados de um array e criar um novo array com os valores modificados.
• Use forEach() para casos simples de iteração quando não precisar de retorno ou modificação do array.
• Utilize map() para manipulação de dados, como modificar valores, criar novos arrays ou realizar cálculos em uma coleção de dados.

Dicas para quem está começando

• Se você não precisa de um novo array, use forEach() para tornar o código mais claro e simples.
• Quando for necessário transformar os dados de um array, como aplicar uma fórmula ou alterar os valores, use map().
• Lembre-se de que forEach() não retorna nada, enquanto map() sempre retorna um novo array.
• Evite usar forEach() se você precisar de um novo array com dados transformados, pois isso pode gerar confusão no seu código.

Compartilhe este tutorial