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!