Javascript para idiotas (como eu) - Iterando objetos

E quem sou eu? Esse segr.. Opa, blog errado. O Javascript para idiotas (como eu) volta após um longo período e vamos continuar de onde paramos, explicando conceitos de Javascript para você como se tivesse seis aninhos.

E o assunto de hoje é bastante simples, mas você pode se confundir com alguns conceitos enquanto está aprendendo a linguagem. A iteração sobre objetos é a ação de passar por cada item de um objeto javascript a fim de executar uma ação sobre esses itens.

Não sei você, mas a princípio eu associei a iteração aos loops que geralmente fazemos com os métodos de array. E aqui está o drama. Se você tentar fazer um map() em um objeto vai receber Uncaught TypError na testa. O que eu vou te falar agora talvez te deixe chocado, mas... um objeto não é um array! Logo, os métodos de array não vão funcionar nele. Eu sei, chocante. Mas você vai superar. A explicação da herança de métodos e propriedades via protótipo que um array recebe (e que é diferente do que um objeto recebe) é assunto para outro post.

Os métodos estáticos de objetos

Não vou me estender e perder tempo com a forma antiga de fazer um laço em objetos (com o for...in), então vamos direto ao ponto.
Atualmente, o Javascript conta com uma forma mais simples de iterar objetos; através dos métodos estáticos.

Estes aqui são os seus novos amigos:

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

É muito simples de usar, não é preciso complicar nada por aqui. Só para lembrar, um objeto é formado por propriedades que têm pares de chave e valor.

Como usar o Object.keys()

O Object.keys(arg) recebe como argumento o objeto que você quer percorrer e ele vai te devolver um array com todas as chaves encontradas no objeto.

let author = {
  name: "Eduardo",
  surname: "Santana",
  age: 26,
}

let arrKeys = Object.keys(author)
console.log(arrKeys) // ["name", "surname", "age"]

Como usar o Object.values()

O Object.values(arg) também recebe como argumento o objeto que você quer percorrer. E assim como o keys, vai te devolver um array. No entanto, esse array será composto por todos os valores encontrados no objeto.

let author = {
  name: "Eduardo",
  surname: "Santana",
  age: 26,
}

let arrValues = Object.values(author)
console.log(arrValues) // ["Eduardo", "Santana", 26]

Como usar o Object.entries()

E seguimos o padrão. O Object.values(arg) recebe como argumento o objeto alvo. Só que dessa vez você vai receber de volta um array de arrays, onde cada array interno é composto por dois elementos: propriedade e valor.

let author = {
  name: "Eduardo",
  surname: "Santana",
  age: 26,
}

let arrEntries = Object.entries(author)
console.log(arrEntries) // [["name", "Eduardo"], ["surname", "Santana"], ["age", 26]]

Conclusão

Esse é o aprendizado de hoje, galerinha. Objetos são iteráveis, mas não com as mesmas ferramentas que usamos em arrays. Para essa missão temos os métodos estáticos de objetos (que como você viu, só transforma tudo em array para que então você use os métodos de array neles). Controverso, mas não sou eu quem faz as regras. Se divirta explorando!