Cómo recorrer un objeto en JavaScript: 5 formas con ejemplos

Cómo recorrer un objeto en JavaScript: de principiante a profesional

Cada desarrollador, tarde o temprano, se enfrenta a la tarea: «¿Cómo recorro todas las propiedades de un objeto?». La pregunta es tan popular que en Stack Overflow ha acumulado miles de visitas y cientos de respuestas. Y no es de extrañar: los objetos en JavaScript son la base de todo, desde configuraciones hasta datos del servidor.

En este tutorial analizaremos todas las formas principales de recorrer un objeto en JavaScript, desde los clásicos hasta los métodos modernos. Aprenderás cuándo usar for...in, en qué es mejor Object.keys y cómo Object.entries simplifica la vida. ¡Allá vamos!

Preparación: creamos un objeto de prueba

Para que los ejemplos sean claros, tomemos un objeto de usuario simple:

const user = {\n  name: 'Ana',\n  age: 28,\n  city: 'Moscú',\n  isAdmin: false\n};

Nuestra tarea es mostrar todas las claves y valores. Veamos qué herramientas hay en el arsenal de JavaScript.

1. Bucle for...in — el clásico del género

La forma más antigua y básica de recorrer las propiedades de un objeto. Apareció en ES3 y funciona en todos los navegadores.

for (let key in user) {\n  console.log(key + ': ' + user[key]);\n}\n// name: Ana\n// age: 28\n// city: Moscú\n// isAdmin: false

Un detalle importante: for...in recorre no solo las propiedades propias, sino también las heredadas a través del prototipo. Para filtrarlas, usa hasOwnProperty:

for (let key in user) {\n  if (user.hasOwnProperty(key)) {\n    console.log(key + ': ' + user[key]);\n  }\n}

Los objetos modernos rara vez tienen propiedades prototípicas adicionales, pero el hábito de verificar hasOwnProperty te protegerá de errores al trabajar con librerías.

2. Object.keys() — un enfoque moderno

El método Object.keys() devuelve un array de las claves propias del objeto. Esto elimina los problemas con los prototipos y da acceso a todos los métodos de arrays.

const keys = Object.keys(user);\nconsole.log(keys); // ['name', 'age', 'city', 'isAdmin']\n\nkeys.forEach(key => {\n  console.log(key + ': ' + user[key]);\n});

Ventajas:

\n
• Solo funciona con propiedades propias (no heredadas)
\n
• Devuelve un array — se puede usar forEach, map, filter
\n
• Código legible y predecible
\n

Esta es mi forma favorita cuando solo necesito obtener una lista de claves y trabajar con ellas.

3. Object.values() — cuando solo necesitas los valores

A veces solo nos interesan los valores de las propiedades, sin las claves. Por ejemplo, para sumar o mostrar datos.

const values = Object.values(user);\nconsole.log(values); // ['Ana', 28, 'Moscú', false]\n\nvalues.forEach(value => {\n  console.log(value);\n});

El método apareció en ES2017 y es ideal para trabajar con colecciones de datos donde las claves no importan.

4. Object.entries() — el rey entre los métodos

Object.entries() devuelve un array de arrays, donde cada array anidado es un par [clave, valor]. Es una herramienta universal para recorrer un objeto en JavaScript.

const entries = Object.entries(user);\nconsole.log(entries);\n// [\n//   ['name', 'Ana'],\n//   ['age', 28],\n//   ['city', 'Moscú'],\n//   ['isAdmin', false]\n// ]\n\nentries.forEach(([key, value]) => {\n  console.log(`${key}: ${value}`);\n});

Observa la desestructuración en los parámetros de forEach: ([key, value]). Esto hace que el código sea limpio y conciso.

Cuándo usarlo:

\n
• Necesitas tanto claves como valores
\n
• Quieres transformar el objeto en otra estructura (por ejemplo, en un Map)
\n
• Escribes una función