Como percorrer um objeto em JavaScript

Neste artigo você vai aprender a como percorrer um objeto em JavaScript, utilizando estrutura de repetição comum da linguagem

Conteúdo também disponível em vídeo:

Fala programador(a), beleza? Bora aprender mais sobre objetos e loops em JavaScript!

Temos algumas abordagens para resolver este problema

Primeiramente vamos criar nossa estrutura, ou seja, nosso objeto que vamos percorrer

Veja o código base:

var pessoas = {
  01: 'Matheus',
  02: 'João',
  03: 'Pedro'
}

Agora vamos utilizar a primeira estratégia, que é o forEach, que basicamente faz um loop no objeto alvo, veja o exemplo:

Object.keys(pessoas).forEach(function(item){

 console.log(item + " - " + pessoas[item]);
 
});

Desta maneira a saída será:

"1 - Matheus"
"2 - João"
"3 - Pedro"

Outro método interessante é o for in, onde podemos percorrer um objeto também

Veja a sintaxe desta abordagem:

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

for (var item in pessoas){

  console.log(item + " - " + pessoas[item]);
  
}

Desta maneira teremos a mesma saída que anteriormente, porém agora utilizando o for in

Outra forma é o Object entries, onde teremos o mesmo resultado ao percorrer um objeto

Veja na prática:

for (var [key, value] of Object.entries(pessoas)) {

    console.log(key + " - " + value);
    
}

Note que todas as formas são muito semelhantes e nos levam ao mesmo resultado

Agora basta você escolher qual das formas é mais interessante para o seu código e aplicar 🙂

Conclusão

Neste artigo falamos sobre como percorrer um objeto em JavaScript

Utilizamos diversas abordagens, para você ter opções ao resolver este problema

Todas chegam ao mesmo resultado e dependendo do objeto, devem ter a mesma performance

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

E se eu quiser só os valores? Object.values:

Às vezes tu não precisa da chave, só do valor mesmo

Pra esse caso existe o Object.values, que devolve direto uma lista com os valores do objeto

Veja na prática:

Object.values(pessoas).forEach(function(valor){

console.log(valor);

});

A saída fica assim:

"Matheus" "João" "Pedro"

Repare que aqui sumiu o "1 – ", "2 – " do exemplo anterior, porque não estamos mais lendo a chave

Se você conhece o forEach de array, é exatamente o mesmo forEach: o Object.values transforma o objeto em array e o resto é o de sempre 🙂

for in ou Object.keys: qual a diferença?

Aqui vale uma parada, porque essa é a pegadinha que mais derruba gente

O Object.keys olha só pras propriedades do PRÓPRIO objeto

Já o for in é mais fofoqueiro: ele também passa pelas propriedades herdadas do protótipo

No exemplo simples lá de cima tanto faz, o resultado é igual

Mas se o objeto vier de uma classe, de uma biblioteca ou de algo que alguém mexeu no prototype, tu pode acabar imprimindo coisa que nem sabia que existia

Tome cuidado! O jeito de se proteger é filtrar dentro do loop:

for (var item in pessoas){

if (!Object.prototype.hasOwnProperty.call(pessoas, item)) continue;

}

Traduzindo o if: "se essa chave não for do próprio objeto, pula"

Se tu não quer nem pensar nisso, vai de Object.keys ou Object.entries, que já nascem limpos 😀

Como parar o loop no meio do caminho?

Situação comum: tu quer achar UMA pessoa e sair fora, não percorrer o objeto inteiro à toa

Com for in e com for of dá pra usar break normalmente:

for (var item in pessoas){

console.log(‘achei: ‘ + item);

break;

}

}

Aí vem a parte que pega muita gente: no forEach o break NÃO funciona

Ele simplesmente não aceita, e um return lá dentro só pula aquela volta, não encerra o loop

Então a regra prática é essa: se tu precisa interromper, usa for in ou for of

Se é pra percorrer tudo até o fim, o forEach resolve numa linha e fica mais limpo

E quando o objeto tem outro objeto dentro?

No exemplo do post cada chave guarda um texto simples

Mas na vida real o objeto costuma vir assim, com objeto dentro de objeto:

var pessoas = { 01: { nome: ‘Matheus’, cidade: ‘Curitiba’ }, 02: { nome: ‘João’, cidade: ‘São Paulo’ } }

Não quebrou! É só que o valor agora é um objeto, não um texto

Pra ler o que tem dentro, tu faz um loop dentro do outro:

console.log(id + " – " + campo + ": " + valor);

}

}

Ou, se tu já sabe os campos, acessa direto:

console.log(pessoa.nome + " mora em " + pessoa.cidade);

Bora ver na prática? Cola no console do navegador e testa os dois =)

Perguntas frequentes sobre percorrer objeto em JavaScript:

Dá pra usar for of direto no objeto?

Não do jeito que tu espera, porque um objeto comum não é iterável como um array

Se tentar, o JavaScript reclama

Por isso a gente usa Object.keys, Object.values ou Object.entries antes: eles entregam um array, e aí sim o for of roda liso

Qual é a diferença entre Object.keys, Object.values e Object.entries?

keys te dá as chaves

values te dá os valores

entries te dá os dois juntos, em pares

É só escolher pelo que tu vai precisar dentro do loop, o resto do código é praticamente igual

A ordem das chaves é garantida?

Aqui vale o aviso: não trate a ordem de um objeto como se fosse a de um array

Se a ORDEM importa pro teu código, guarda os dados num array em vez de objeto, aí tu manda na sequência

Como transformar um objeto em array?

Já tá respondido nos exemplos acima haha

Object.values(pessoas) te devolve um array de valores e Object.entries(pessoas) um array de pares

Depois disso tu tem map, filter, reduce e tudo mais que já usa em array

Como percorrer um objeto e montar um novo?

Combina Object.entries com o que tu já conhece de array

Percorre, monta o que precisa e vai empurrando pro resultado, igual tu faria com uma lista qualquer