JavaScript forEach: executar callback em arrays

O forEach de array em JavaScript (Array.prototype.forEach) executa um callback uma vez por elemento de um array, na ordem dos índices. Use um loop JavaScript forEach para efeitos colaterais, como logs, atualizações de DOM ou atualização de uma variável externa, quando você não precisa de break nem de await. Como ele retorna undefined, não é a ferramenta certa para transformações (map) ou buscas que podem parar cedo (find, some). Para controle de fluxo, prefira um loop for...of.

Exemplo de JavaScript forEach para iterar arrays

Saída:

0: vermelho
1: verde
2: azul

Como este exemplo funciona

1. cores guarda três strings em um array.
2. forEach chama a arrow function uma vez por elemento, passando o elemento atual e seu índice baseado em zero como argumentos.
3. O callback registra cada cor junto com sua posição. forEach processa os elementos em ordem crescente de índice e ignora slots vazios em arrays esparsos.

Armadilhas comuns do forEach

Usar forEach com async/await:

Errado:

const urls = ["https://example.com/a", "https://example.com/b"];

urls.forEach(async (url) => {
  await fetch(url);
});
console.log("concluído"); // executa imediatamente

Certo:

for (const url of urls) {
  await fetch(url);
}

forEach não aguarda promises retornadas pelo callback. Use for...of para await sequencial ou await Promise.all(urls.map((url) => fetch(url))) para trabalho em paralelo.

Tentar sair do forEach com break:

Errado:

const itens = ["a", "b", "c"];
const alvo = "b";

itens.forEach((item) => {
  if (item === alvo) break; // erro de sintaxe
});

Certo:

const encontrado = itens.find((item) => item === alvo);

forEach não permite saída antecipada. Use find/some para buscas com curto-circuito ou for...of quando precisar de break.

forEach vs map vs for…of

Use forEach para efeitos colaterais quando saída antecipada e await não forem necessários. Use map quando o resultado for um array transformado. Use for...of quando precisar de break, continue ou await sequencial.

FAQ

Dá para sair cedo de um JavaScript forEach?

Não. forEach executa o callback para todos os elementos. Lançar uma exceção interrompe a iteração, mas isso é um antipadrão. Use for...of com break ou find/some/every para buscas com curto-circuito.

forEach modifica o array original?

O forEach em si não modifica o array. O callback pode alterar elementos de objeto no próprio lugar porque recebe referências, não cópias. Valores primitivos como números e strings são passados por valor e não podem ser alterados pelo parâmetro do callback.

Qual é a diferença entre forEach e map?

forEach retorna undefined e foi pensado para efeitos colaterais. map retorna um novo array construído a partir dos valores de retorno do callback. Se o objetivo for transformar dados, use map; se o objetivo for executar ações como logs ou atualizações de DOM, use forEach.