Percorrer objetos: keys, values e entries

Percorrer um objeto

Imagine um carrinho com os preços de cada produto e você quer somar o total. Para isso precisa percorrer o objeto. O problema: diferente dos arrays, os objetos não têm índices numéricos, então não há um [0], [1] para se agarrar. A solução são os utilitários de Object.

Object.keys: as chaves

const pessoa = { nome: "Ana", idade: 30 };
console.log(Object.keys(pessoa)); // ["nome", "idade"]

Object.values: os valores

console.log(Object.values(pessoa)); // ["Ana", 30]

Object.entries: pares [chave, valor]

console.log(Object.entries(pessoa));
// [["nome", "Ana"], ["idade", 30]]

Percorrer com for...in

O laço for...in itera sobre as chaves de um objeto:

for (const chave in pessoa) {
  console.log(chave, "=>", pessoa[chave]);
}

Combinar com métodos de array

Aqui o círculo se fecha: como Object.keys e Object.values retornam arrays, você pode encadear o map, filter ou reduce que já domina. Aquele carrinho do começo, resolvido em uma linha:

const precos = { pao: 2, leite: 1, cafe: 5 };
const total = Object.values(precos).reduce((a, b) => a + b, 0); // 8

E com isso você encerra o bloco de fundamentos de JavaScript. Pare um momento e repare em tudo o que você já sabe fazer: variáveis, condicionais, laços, funções, arrays e agora objetos com métodos. Você não escreve mais "pedaços soltos": modela dados do mundo real e os processa. Daqui em diante (ES6, o DOM…) tudo se constrói sobre essas bases. Mandou bem.

Exemplos

Calcular a média a partir de um objeto de notas

const notas = { mat: 8, portugues: 7, ciencias: 9 };
const chaves = Object.keys(notas);
const soma = Object.values(notas).reduce((a, b) => a + b, 0);
console.log(chaves);           // ["mat", "portugues", "ciencias"]
console.log("Média:", soma / chaves.length); // 8