Artigo original: Loop Through an Object in JavaScript – How to Iterate Over an Object in JS

Em JavaScript, quando você ouve o termo "laço", provavelmente pensa em usar os vários métodos de laço, como os laços for, forEach(), map(), dentre outros (textos nos links em inglês).

No caso de objetos, infelizmente, esses métodos não funcionam, pois objetos não são iteráveis. 😒

Isso não significa que não podemos ter um laço em um objeto – mas que não podemos iterar em um objeto diretamente, da mesma forma que fazemos em um array:

let arr = [24, 33, 77];
arr.forEach((val) => console.log(val)); // ✅

for (val of arr) {
  console.log(val); // ✅
}

let obj = { idade: 12, nome: "Fulano de Tal" };
obj.forEach((val) => console.log(val)); // ❌

for (val of obj) {
  console.log(val); // ❌
}

Neste artigo, você aprenderá como fazer um laço em um objeto em JavaScript. Existem dois métodos que você pode usar - sendo um deles anterior à introdução do ES6.

Como iterar por um objeto em JavaScript com um laço for…in

Antes da especificação ES6, utilizávamos o método for...in sempre que queríamos iterar em um objeto.

O laço for...in itera pelas propriedades do protótipo do objeto. Isso faz com que sempre que precisemos iterar em um objeto com o laço for…in, precisamos verificar se a propriedade pertence ao objeto usando o método hasOwnProperty, assim:

const populacao = {
  macho: 4,
  femea: 93,
  outros: 10
};

// Iteração pelo objeto
for (const chave in populacao) {
  if (populacao.hasOwnProperty(chave)) {
    console.log(`${chave}: ${populacao[chave]}`);
  }
}

Para evitar o estresse e a dificuldade desse laço e depender do método hasOwnProperty para verificar se há aquela propriedade, o ES6 e ES8 introduziram métodos estáticos de objetos. Eles convertem as propriedades do objeto em arrays, permitindo-nos usar métodos de array diretamente.

Como iterar um objeto em JavaScript com métodos estáticos de objeto

Um objeto é formado por propriedades, que têm pares chave-valor, ou seja, cada propriedade sempre terá um valor correspondente.

Os métodos estáticos de objeto nos permitem extrair keys(), values() ou ambas (chaves e valores) como entradas, pelo método entries(), para um array, permitindo-nos ter tanta flexibilidade sobre eles quanto temos com arrays reais.

Temos três métodos estáticos de objeto, que são:

  • Object.keys()
  • Object.values()
  • Object.entries()

Como iterar um objeto em JavaScript com o método Object.keys()

O método Object.keys() foi introduzido no ES6. Ele pega como argumento o objeto no qual queremos fazer um laço e retorna um array contendo todos os nomes de propriedades.

const populacao = {
  macho: 4,
  femea: 93,
  outros: 10
};

let generos = Object.keys(populacao);

console.log(generos); // ["macho","femea","outros"]

Isso agora nos permite usar qualquer método de iteração de array no array das chaves e recuperar o valor de cada propriedade do objeto:

let generos = Object.keys(populacao);

generos.forEach((genero) => console.log(genero));

Isso retornará:

"macho"
"femea"
"outros"

Também podemos usar a chave para obter o valor usando a notação de colchetes, como populacao[genero]:

generos.forEach((genero) => {
  console.log(`Há ${populacao[genero]} ${genero}`);
})

Isso retornará:

"Há 4 macho"
"Há 93 femea"
"Há 10 outros"

Antes de continuarmos, vamos usar esse método para somar toda a população fazendo um laço para sabermos a população total:

const populacao = {
  macho: 4,
  femea: 93,
  outros: 10
};

let totalPopulacao = 0;
let generos = Object.keys(populacao);

generos.forEach((genero) => {
  totalPopulacao += populacao[genero];
});

console.log(totalPopulacao); // 107

Como iterar um objeto em JavaScript com o método Object.values()

O método Object.values() é muito semelhante ao método Object.keys() e foi introduzido no ES8. Este método utiliza como um argumento o objeto em que queremos fazer um laço e retorna um array contendo todos os valores de chave.

const populacao = {
  macho: 4,
  femea: 93,
  outros: 10
};

let numeros = Object.values(populacao);

console.log(numeros); // [4,93,10]

Isso agora nos permite utilizar qualquer método de iteração de array para recuperar o valor (value) de cada propriedade:

let numeros = Object.values(populacao);

numeros.forEach((numero) => console.log(numeros));

Isso retornará:

4
93
10

Agora, podemos realizar o cálculo do total com eficiência, pois podemos fazer um laço diretamente no objeto, assim:

let totalPopulacao = 0;
let numeros = Object.values(populacao);

numeros.forEach((numero) => {
  totalPopulacao += numero;
});

console.log(totalPopulacao); // 107

Como iterar um objeto em JavaScript com o método Object.entries()

O método Object.entries() também foi introduzido com o ES8. Basicamente, o que ele faz é gerar um array de arrays, em que cada array interno possui dois elementos: a propriedade e o valor. Aqui vemos um exemplo:

const populacao = {
  macho: 4,
  femea: 93,
  outros: 10
};

let populacaoArr = Object.entries(populacao);

console.log(populacaoArr);

Isso retorna:

[
  ['macho', 4]
  ['femea', 93]
  ['outros', 10]
]

Você pode usar qualquer método de array para percorrê-lo também:

for (array of populacaoArr){
  console.log(array);
}

// Output:
// ['macho', 4]
// ['femea', 93]
// ['outros', 10]

Se quisermos desestruturar o array (texto em inglês), obteremos a chave (key) e o valor (value):

for ([chave, valor] of populacaoArr){
  console.log(chave);
} 

Você pode aprender mais sobre como iterar em arrays neste artigo (texto em inglês).

Conclusão

Neste tutorial, aprendemos que a melhor forma de iterarmos por um objeto é utilizando um dos métodos estáticos de objeto, de acordo com suas necessidades, convertendo o objeto em um array antes de percorrê-lo com um laço.

Divirta-se escrevendo código!