3 Maneiras de iterar objetos em Javascript

Em Javascript Objetos nada mais são do que um tipo especial de Arrays. Com eles você pode definir indicies não sequencias e não numéricos, por exemplo.

E muita das vezes, se você tem um objeto com muitas propriedades, você precisa descobrir uma maneira de de iterar sobre esse objeto, e nesse post é exatamente sobre o que vamos falar, acompanhe.

1. Iterar objetos em Javascript utilizando for...of

Ok, talvez a forma mais comum e também a mais simples seja utilizando o método Object.entries() esse método na mais do que retorna um conjunto de pares [chave, valor] na qual você simplesmente consegue acessar dentro de um loop.

Olha esse exemplo aqui embaixo, o objeto tem apenas duas propriedades nome e idade, então o método Object.entries() vai retornar um array com dois elementos.

O primeiro elemento sendo o nome da propriedade e o valor dessa propriedade, é a mesma coisa para a segunda propriedade do nosso exemplo que vai estar guardada no segundo elemento do array .

const objeto = {
  nome: 'James',
  idade: 42
};

console.log(Object.entries(objeto));

// resultado:
// [
//    ["nome", "James"], 
//    ["idade", 42]
// ]

Esse método é bem simples e te retorna exatamente o que você precisa para iterar com o objeto em questão, a partir desse array você pode usar o método for...of que você consegue acessar cada chave e valor:

const objeto = {
  nome: 'James',
  idade: 42
};

for (const [chave, valor] of Object.entries(objeto)) {
  console.log(`${chave}: ${valor}`);
}

// resultado:
// "nome: James",
// "idade: 42"

⚠️ Algumas coisas sobre esse método que você precisa ter em mente.

Se você tiver um objeto, onde as chaves são números, utilizando o método Object.entries() a ordem dos pares na resposta não é garantida.

const objeto = {
  100: 'James',
  nome: 42,
  99: 'silva'
};

console.log(Object.entries(objeto));

// resultado:
// [
//    ["99", "silva"], 
//    ["100", "James"]
//    ["nome", 42]
// ]

2. Iterar objetos em Javascript utilizando foreach() ou map()

Se você só precisa acessar o valores correspondente a cada chave dentro do objeto, o problema é bem parecido, mas no entanto você pode user a combinação Object.values() e foreach(). Utilizando arrow functions então o código fica bem limpo.

const objeto = {
  nome: 'James',
  idade: 42
};

Object.values(objeto).forEach(valor => console.log(valor));

// resultado:
// "James"
// 42

Ou de forma bem parecida, você pode utilizar o método map().

const objeto = {
  nome: 'James',
  idade: 42
};

Object.values(objeto).map(valor => console.log(valor));

// resultado:
// "James"
// 42

Se você não sabe qual deles utilizar, da um pulo nesse post, onde eu explico a diferença entre os dois.

3. Iterar objetos em Javascript utilizando for...in

Um outro método que podemos utilizar é o for..in, talvez não tão popular mas certamente cumpre o seu papel. Ele tem uma sintaxe muita parecida com o for..of que vimos no primeiro exemplo, mas com a vantagem que não precisamos utilizar o método Object.entries().

const objeto = {
  nome: 'James',
  idade: 42
};

for (const propriedade in objeto) {
  console.log(`${propriedade}: ${objeto[propriedade]}`);
}

// resultado:
// "nome: James",
// "idade: 42"

0 Comments