Cómo recorrer las propiedades de un objeto en JavaScript: de principiante a profesional
\n\nCada desarrollador que escribe en JavaScript, tarde o temprano se enfrenta a la tarea: «¿Cómo recorro todas las propiedades de un objeto?». Si estás acostumbrado a trabajar con arrays, donde tienes for, forEach y map, los objetos pueden parecer rebeldes. ¡Pero no te apresures a frustrarte! En este artículo analizaremos todas las formas de iterar sobre un objeto en JavaScript — desde el clásico for...in hasta los modernos Object.keys(), Object.values() y Object.entries().
No solo mostraremos la sintaxis. Analizaremos qué método elegir para una tarea específica, qué trampas existen y cómo no caer en errores con las propiedades heredadas. ¡Allá vamos!
\n\n¿Qué es un objeto en JavaScript y por qué es necesario iterarlo?
\n\nUn objeto es una colección de pares «clave: valor». A diferencia de un array, donde los elementos están ordenados por índice, en un objeto el orden de las propiedades no está garantizado (aunque los motores modernos intentan mantenerlo).
\n\nImagina que tienes un objeto con datos de usuario:
\n\nconst user = {\n name: 'Ana',\n age: 28,\n city: 'Madrid',\n isAdmin: false\n};\n\nNecesitas mostrar todos los datos en pantalla, enviarlos al servidor o simplemente calcular algo. Sin iteración tendrías que escribir user.name, user.age, etc. — esto no es flexible ni escalable. ¿Y si el objeto tiene 50 propiedades? Ahí es donde los métodos de iteración son útiles.
Método n.º 1: El clásico for...in
\n\nLa forma más antigua y directa de recorrer las propiedades de un objeto es usar el bucle for...in. Fue creado específicamente para objetos.
const user = {\n name: 'Ana',\n age: 28,\n city: 'Madrid'\n};\n\nfor (let key in user) {\n console.log(key + ': ' + user[key]);\n}\n// Salida:\n// name: Ana\n// age: 28\n// city: Madrid\n\nAquí key es el nombre de la propiedad (valor de cadena), y user[key] es su valor.
¡Importante! for...in itera no solo sobre las propiedades propias del objeto, sino también sobre aquellas heredadas a través de la cadena de prototipos. Esto puede llevar a resultados inesperados, especialmente si has extendido los prototipos de objetos incorporados (algo que no se debe hacer, pero por si acaso).
Para evitar esto, usa el método hasOwnProperty:
for (let key in user) {\n if (user.hasOwnProperty(key)) {\n console.log(key + ': ' + user[key]);\n }\n}\n\nUna alternativa moderna es Object.hasOwn() (ES2022):
for (let key in user) {\n if (Object.hasOwn(user, key)) {\n console.log(key + ': ' + user[key]);\n }\n}\n\n¿Cuándo usar for...in? Cuando necesites los nombres de las propiedades (claves) y estés seguro de que no te encontrarás con propiedades heredadas. O cuando trabajes con objetos simples creados con el literal {}.
Método n.º 2: Object.keys() — obtenemos un array de claves
\n\nEl método Object.keys() devuelve un array de las propiedades enumerables propias (no heredadas) del objeto. Es la forma más popular y segura de iteración hoy en día.
const user = {\n name: 'Ana',\n age: 28,\n city: 'Madrid'\n};\n\nconst keys = Object.keys(user);\nconsole.log(keys); // ['name', 'age', 'city']\n\n// Ahora se puede usar forEach o for...of\nkeys.forEach(key => {\n console.log(key + ': ' + user[key]);\n});\n\nVentaja: obtienes un array normal con el que puedes hacer lo que quieras — filtrar, mapear, ordenar.
\n\nEjemplo con filtrado:
\n\nconst filteredKeys = Object.keys(user).filter(key => key !== 'isAdmin');\nfilteredKeys.forEach(key => console.log(user[key]));\n\n¿Cuándo usar Object.keys()? Prácticamente siem