Como resolver o erro forEach is not a function

Neste artigo você vai aprender a como identificar o problema e resolver o erro forEach is not a function, vem conferir!

Fala programador(a), beleza? Bora aprender mais sobre JavaScript e forEach!

Se você já experimentou programação JavaScript, provavelmente se deparou com o erro “forEach is not a function”.

Este erro pode ser um pouco confuso, especialmente para desenvolvedores iniciantes, mas não se preocupe!

Neste artigo, vamos mergulhar na causa desse erro e como resolvê-lo.

O método forEach é uma função incorporada em JavaScript que executa uma função fornecida uma vez para cada elemento em um array, em ordem.

É uma maneira concisa e fácil de iterar sobre elementos em um array.

No entanto, o erro “forEach is not a function” ocorre quando você tenta usar o método forEach em algo que não é um array.

Entendendo arrays e objetos em JavaScript

Para entender por que o erro ocorre, é importante entender a diferença entre arrays e objetos em JavaScript.

Um array é uma estrutura de dados que contém uma lista de elementos. Cada elemento em um array tem um índice, que é usado para acessar o elemento.

Por outro lado, um objeto é uma coleção de propriedades, e cada propriedade é composta por um par de chave-valor.

O método forEach é uma propriedade de protótipo do objeto Array, o que significa que está disponível para todos os arrays.

No entanto, não está disponível para objetos, que é onde muitos desenvolvedores encontram problemas.

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

Exemplos comuns do erro

Vamos dar uma olhada em um exemplo comum do erro “forEach is not a function”:

let obj = { name: "John", age: 30, city: "New York" };
obj.forEach((key) => console.log(key));

Neste exemplo, estamos tentando usar o método forEach em um objeto.

No entanto, como mencionado anteriormente, o método forEach não está disponível para objetos, apenas para arrays.

Portanto, este código resultará no erro “forEach is not a function”.

Como resolver o erro “forEach is not a function”

Agora que entendemos a causa do erro, como podemos resolvê-lo? A solução depende do que você está tentando alcançar.

Se você estiver tentando iterar sobre as propriedades de um objeto, você pode usar um loop for…in, Object.keys() com forEach, ou Object.entries() com forEach.

Aqui está como você pode fazer isso com um loop for…in:

let obj = { name: "John", age: 30, city: "New York" };
for (let key in obj) {
  console.log(key);
}

Aqui está como você pode fazer isso com Object.keys() e forEach:

let obj = { name: "John", age: 30, city: "New York" };
Object.keys(obj).forEach((key) => console.log(key));

E aqui está como você pode fazer isso com Object.entries() e forEach:

let obj = { name: "John", age: 30, city: "New York" };
Object.entries(obj).forEach(([key, value]) => console.log(`${key}: ${value}`));

No entanto, se você realmente deveria estar trabalhando com um array em vez de um objeto, você precisará corrigir seu código para que você esteja usando um array.

Aqui está um exemplo de como você pode fazer isso:

let arr = ["John", 30, "New York"];
arr.forEach((element) => console.log(element));

Neste exemplo, estamos utilizando corretamente o método forEach em um array.

Este código imprimirá cada elemento do array na console, sem erros.

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Conclusão

O erro “forEach is not a function” é um erro comum em JavaScript que ocorre quando tentamos usar o método forEach em algo que não é um array.

Ao entender a causa deste erro e como os objetos e arrays funcionam em JavaScript, podemos evitar esse erro e escrever código que funcione como esperado.

Lembre-se, forEach é uma função que existe apenas em arrays.

Se você quiser iterar sobre as propriedades de um objeto, você precisará usar um loop for…in, Object.keys() com forEach, ou Object.entries() com forEach.

Espero que este artigo tenha ajudado a entender o erro “forEach is not a function” e como resolvê-lo.

Está buscando em evoluir como Programador? Confira o nossos cursos clicando aqui.

Nosso principal objetivo é tornar você um dev profissional que é capaz de resolver problemas de alta dificuldade e criar projetos complexos, através de uma metodologia planejada nos mínimos detalhes, após formar muitos outros desenvolvedores.

Cursos com vários projetos, exercícios, material apoio, comunidade de alunos e muito mais!

Como descobrir o que a sua variável realmente é:

Antes de sair trocando forEach por outra coisa, para tudo e olha o dado

Na linha de cima do erro, joga isso:

console.log(minhaVariavel);
console.log(typeof minhaVariavel);
console.log(Array.isArray(minhaVariavel));

Se o Array.isArray devolver false, achamos o culpado: o que tá ali não é array, é outra coisa 🙂

Às vezes o problema nem é o forEach, é o dado que chegou errado lá atrás, umas cinco linhas antes

Faça o teste antes de mexer no resto do código, vale muito a pena

E quando o dado veio de uma API?

Esse é o caso que mais pega gente hoje

Tu faz o fetch, recebe o JSON, chama forEach e o console explode

O motivo quase sempre é o mesmo: tu achava que ia receber uma lista, e o que veio foi um objeto com a lista lá dentro

const resposta = await fetch(url);
const dados = await resposta.json();

console.log(dados); // olha o formato ANTES de iterar

dados.forEach((item) => console.log(item)); // quebra se dados for um objeto

A correção é apontar o forEach pra parte que é array de verdade:

const lista = dados.resultados; // o nome da chave depende da API, confere no console
lista.forEach((item) => console.log(item));

Ou seja: o conserto não tá no forEach, tá em entender o formato da resposta

Tome cuidado aqui, porque o mesmo endpoint pode devolver um objeto de erro quando algo dá ruim, e aí quebra de novo

E se o erro vem de um elemento da página?

Outro clássico: tu pega elementos do HTML e tenta iterar em cima

Coleções que vêm do DOM se parecem MUITO com array, mas não são array de verdade, e é aí que mora a pegadinha

A saída segura é converter antes de iterar:

const itens = Array.from(document.querySelectorAll(".item"));
itens.forEach((el) => console.log(el.textContent));

Assim tu não precisa nem lembrar o que cada coleção aceita ou deixa de aceitar

Converte pra array, itera em paz 😀

Como blindar o código pra esse erro não voltar:

Entender a causa é ótimo, mas dá pra fazer o código não quebrar mesmo quando o dado vier torto

É só checar antes de iterar:

if (Array.isArray(minhaVariavel)) {
minhaVariavel.forEach((item) => console.log(item));
} else {
console.log("não é array, olha o que chegou aqui:", minhaVariavel);
}

Ou, se tu quer que o fluxo siga sem drama, deixa uma lista vazia como plano B:

lista.forEach((item) => console.log(item));

Parece bobo, mas é isso que separa a tela em branco do usuário de um erro que tu vê no console e conserta com calma

Já me ferrei uma vez por confiar cegamente no formato do dado, então fica a dica

Um detalhe novo que mudou desde que esse erro apareceu por aí:

Antigamente o forEach quebrava porque a gente escrevia o objeto errado com a própria mão

Hoje boa parte do código nasce colado: veio de uma resposta de IA, de um trecho de tutorial, de um snippet antigo

E aí acontece o seguinte: o forEach vem certinho, o problema é que o SEU dado tem formato diferente do dado do exemplo original

Por isso o hábito mais valioso é esse, e vale pra qualquer código que tu não escreveu do zero: dá um console.log no dado antes de iterar

A IA acerta a estrutura, mas ela não sabe o que a sua API devolve, beleza?