Cómo recorrer propiedades de un objeto Javascript

Cuando tenemos colecciones de datos solemos añadirlas en un array, Set, o Map ya que son los objetos más habiluales donde guardar información en Javascript.

En ocasiones tenemos nuestra información almacenada en un objecto y no podemos recorrerla de una forma tan sencilla como un bucle for clásico

Podemos observar que si intentamos iterar mediante map, for... of o mediante forEach nos dará error.

Entonces, ¿cómo podemos hacerlo?

El método más sencillo es utilizar el bucle for ... in. Este bucle nos devolverá las propiedades y podremos acceder a sus valores mediante la notación por corchetes:

const miObjeto = {
  propiedad1: "uno",
  propiedad2: "dos",
  propiedad3: "tres"
}
for (let prop in miObjeto){
  console.log(miObjeto[prop]) // uno, dos, tres
}

Otra forma sería obtener los valores mediante Object.values

const miObjeto = {
  propiedad1: "uno",
  propiedad2: "dos",
  propiedad3: "tres"
}
Object.values(miObjeto) // [ 'uno', 'dos', 'tres' ]

De la misma forma, si lo que queresmos es obtener sus propiedades, podremos usar Object.keys

const miObjeto = {
  propiedad1: "uno",
  propiedad2: "dos",
  propiedad3: "tres"
}
Object.keys(miObjeto) // [ 'propiedad1', 'propiedad2', 'propiedad3' ]

Si de alguna manera queremos recurrir a obtener tanto las propiedades como los valores, podemos usar Object.entries. Este método nos devolverá un array de arrays con dos valores. El primer valor será la propiedad y el segundo el valor.

Al ser un array podremos operar con ellos más fácilmente:

const miObjeto = {
  propiedad1: "uno",
  propiedad2: "dos",
  propiedad3: "tres"
}

Object.entries(miObjeto).forEach(([key, value]) => {
  console.log(`${key} : ${value}`)
})