Transformación a Array e iteración

Un array lo recorres con un bucle sin pensarlo. Pero ¿y un objeto, que no tiene índices ni length? Hay varias formas de hacerlo y aquí tienes las más comunes: el bucle for...in y los métodos Object.keys(), Object.values() y Object.entries().

Iterando con for...in#

El bucle for...in da una vuelta por cada propiedad enumerable de un objeto. En cada vuelta te entrega el nombre de la propiedad, no su valor. Para el valor, usas los corchetes que ya conoces:

const spiderman = {  name: 'Spidey',  universe: 42,  powers: ['web', 'invisibility', 'spider-sense']}for (const property in spiderman) {  console.log(`${property}: ${spiderman[property]}`);}// -> name: Spidey// -> universe: 42// -> powers: web,invisibility,spider-sense

En la primera vuelta property vale 'name', en la segunda 'universe' y en la tercera 'powers'.

Transformar un objeto en un array#

Otra opción es convertir el objeto en un array y recorrerlo con todos los métodos de array que ya dominas. Para eso tienes Object.keys(), Object.values() y Object.entries().

Los tres devuelven un array, pero cada uno lo llena con cosas distintas. Vamos uno por uno.

Iterar con Object.keys()

El método Object.keys() devuelve un array con los nombres de las propiedades enumerables de un objeto.

const spiderman = {  name: 'Spidey',  universe: 42,  powers: ['web', 'invisibility', 'spider-sense']}const properties = Object.keys(spiderman)console.log(properties.length) // -> 3properties.forEach(property => {  console.log(property)})// -> name// -> universe// -> powers

Hace algo muy parecido al for...in de antes, con una ventaja: como properties es un array de verdad, puedes preguntarle su length o usar forEach.

Iterando con Object.values()

El método Object.values() devuelve un array con los valores de las propiedades enumerables de un objeto.

const values = Object.values(spiderman)values.forEach(value => {  console.log(value)})// -> Spidey// -> 42// -> [ 'web', 'invisibility', 'spider-sense' ]

La diferencia es justo la que dicen los nombres: Object.keys() te da las claves y Object.values(), los valores.

Iterando con Object.entries()

¿Y si necesitas las dos cosas a la vez? El método Object.entries() devuelve un array de arrays, donde cada subarray es un par [propiedad, valor].

const entries = Object.entries(spiderman)entries.forEach(entry => {  console.log(entry)})// -> [ 'name', 'Spidey' ]// -> [ 'universe', 42 ]// -> [ 'powers', [ 'web', 'invisibility', 'spider-sense' ] ]

Cada entry trae la propiedad en la posición 0 y su valor en la posición 1. Se ve más claro en este ejemplo:

const entries = Object.entries(spiderman)entries.forEach(entry => {  const property = entry[0]  const value = entry[1]  console.log(`${property}: ${value}`)})

Así quedan los tres métodos comparados, con el mismo objeto: