Cómo imprimir elementos de un objeto como si fuera un array en JavaScript 👨🏻‍💻

11514

En este pequeño tutorial, te enseñaré cómo puedes acceder a todos los elementos de un objeto en JavaScript como si de un array se tratara. Verás que esto es muy fácil y rápido. Tenemos dos formas para hacer esto, una es menos legible que la otra, pero ambas son fáciles.

Primera forma con Object

Nada es mejor que explicar con ejemplos, así que vayamos directo a un ejemplo en código. Supongamos que tenemos un objeto persona con algunas propiedades:

const persona = {
  nombre: "Johan",
  edad: 19,
  rol: "frontend"
};

Ahora queremos mostrar todos esos datos en formato de string, así:
nombre: Johan
edad: 19
rol: frontend

Para hacerlo, podemos hacer uso de Object, que no es más que un contenedor para guardar un conjunto de datos y/o funcionalidades relacionadas. Object es un tipo de dato que puede contener propiedades y métodos. En este caso Object nos sirve porque estamos trabajando con un objeto llamado persona y podemos hacer uso de varios de sus métodos para manipular este objeto a nuestro gusto.

Tenemos el método values que nos permite acceder a los valores de las propiedades de cualquier objeto y nos las devuelve en un array. Si lo probamos veremos que nos devolverá “Johan”, 19 y “frontend”. Solo basta con usar Object, acceder a su método values y dentro pasarle como argumento el objeto del cual queremos acceder a sus valores:

Object.values(persona);

Esto es lo que sale por consola:

Otro método que tenemos es el de keys que funciona igual que values solo que en vez de devolvernos los valores, nos devuelve el nombre de las propiedades, es decir las keys:

Object.keys(persona);

Pero lo mejor de todo es que tenemos un método más completo que hace todo junto y nos devuelve un array por cada clave y su correspondiente valor.

Este es el método entries que se invoca igual que los anteriores, pero echa un vistazo al resultado:

Object.entries(persona);

Con este último método ya estaríamos conviertiendo nuestro objeto en el array que necesitamos y ya podríamos iterar sobre él. Vamos a hacerlo:

Vamos hacer uso del for…of en este caso, que nos sirve para iterar sobre cualquier objeto iterable. Como tenemos dos elementos por array entonces vamos a usar dos variables, una para guardar la clave (key) y otra para guardar el valor (value):

for (let [key, value] ofObject.entries(persona)) {
    console.log(`${key}: ${value}`); // Mostramos por consola en el formato que queríamos
}

¡Listo! Ya iteramos sobre un objeto como si fuera un array. Ahora bien, hay una forma más corta y tal vez más legible de hacer esto.

Segunda forma con for…in

Para esta forma vamos a hacer uso del for…in que es una variante del for para iterar sobre todas las propiedades de un objeto, osea que es un for especial para nuestro caso ¡Que buen servicio!

Entonces para empezar necesitamos una sola variable que guardará cada propiedad del objeto y luego podemos usar cada propiedad y acceder a su valor con los [] como si fuera un array. Vamos a verlo:

for (let propertyin persona) {
	console.log(`${property}: ${persona[property]}`); 
	// Usamos 'persona[property]' para acceder al valor de la propiedad en cada iteración
}

Y como puedes observar tenemos el mismo resultado. Claramente esta forma es más corta y sencilla. La elección de qué forma usar dependerá de tus necesidades, gustos y el contexto en el que te encuentres. Incluso a veces podrías necesitar solo acceder a las propiedas de un objeto y no a sus valores o viceversa; para esto existen esos métodos. Lo genial es que pudimos llegar a un mismo resultado de dos maneras diferentes, eso es lo bonito de la programación.

Espero que este tutorial te haya servido y mi explicación te haya quedado clara. Te agradecería un montón que me dieras feedback dejandome algún comentario o si tienes algo para aportar, corregir o alguna duda que te haya surgido. No olvides que hay mucho más por explorar en la documentación oficial. Un saludo y que tengas buen código. Gracias por leer 💚.

Referencias:

hace un año