Como percorrer um objeto em JavaScript: 5 maneiras com exemplos

Como percorrer um objeto em JavaScript: do iniciante ao profissional

Todo desenvolvedor, mais cedo ou mais tarde, enfrenta a tarefa: "Como percorrer todas as propriedades de um objeto?". A pergunta é tão popular que no Stack Overflow ela reuniu milhares de visualizações e centenas de respostas. E não é surpresa — objetos em JavaScript são a base de tudo: desde configurações até dados do servidor.

Neste tutorial, abordaremos todas as principais maneiras de percorrer um objeto em JavaScript, desde os clássicos até os métodos modernos. Você aprenderá quando usar for...in, como Object.keys é melhor e como Object.entries simplifica a vida. Vamos lá!

Preparação: criando um objeto de teste

Para que os exemplos sejam claros, vamos usar um objeto simples de usuário:

const user = {\n  name: 'Ana',\n  age: 28,\n  city: 'Moscou',\n  isAdmin: false\n};

Nossa tarefa é exibir todas as chaves e valores. Vamos ver quais ferramentas estão no arsenal do JavaScript.

1. Loop for...in — o clássico do gênero

A maneira mais antiga e básica de percorrer as propriedades de um objeto. Ele surgiu no ES3 e funciona em todos os navegadores.

for (let key in user) {\n  console.log(key + ': ' + user[key]);\n}\n// name: Ana\n// age: 28\n// city: Moscou\n// isAdmin: false

Uma nuance importante: for...in percorre não apenas as propriedades próprias, mas também as herdadas através do protótipo. Para filtrá-las, use hasOwnProperty:

for (let key in user) {\n  if (user.hasOwnProperty(key)) {\n    console.log(key + ': ' + user[key]);\n  }\n}

Objetos modernos raramente têm propriedades de protótipo extras, mas o hábito de verificar hasOwnProperty evitará bugs ao trabalhar com bibliotecas.

2. Object.keys() — abordagem moderna

O método Object.keys() retorna um array das chaves próprias do objeto. Isso elimina problemas com protótipos e dá acesso a todos os métodos de arrays.

const keys = Object.keys(user);\nconsole.log(keys); // ['name', 'age', 'city', 'isAdmin']\n\nkeys.forEach(key => {\n  console.log(key + ': ' + user[key]);\n});

Vantagens:

\n
• Trabalha apenas com propriedades próprias (não herdadas)
\n
• Retorna um array — pode usar forEach, map, filter
\n
• Código legível e previsível
\n

Esta é minha maneira favorita quando preciso apenas obter uma lista de chaves e trabalhar com elas.

3. Object.values() — quando só os valores importam

Às vezes, estamos interessados apenas nos valores das propriedades, sem as chaves. Por exemplo, para somar ou exibir dados.

const values = Object.values(user);\nconsole.log(values); // ['Ana', 28, 'Moscou', false]\n\nvalues.forEach(value => {\n  console.log(value);\n});

O método surgiu no ES2017 e é ótimo para trabalhar com coleções de dados onde as chaves não importam.

4. Object.entries() — o rei entre os métodos

Object.entries() retorna um array de arrays, onde cada array aninhado é um par [chave, valor]. Esta é uma ferramenta universal para percorrer um objeto em JavaScript.

const entries = Object.entries(user);\nconsole.log(entries);\n// [\n//   ['name', 'Ana'],\n//   ['age', 28],\n//   ['city', 'Moscou'],\n//   ['isAdmin', false]\n// ]\n\nentries.forEach(([key, value]) => {\n  console.log(`${key}: ${value}`);\n});

Observe a desestruturação nos parâmetros do forEach: ([key, value]). Isso torna o código limpo e conciso.

Quando usar:

\n
• Precisa de chaves e valores
\n
• Quer transformar o objeto em outra estrutura (por exemplo, em Map)
\n
• Está escrevendo funcio