JavaScript Object.keys, values, entries

Iterando sobre objetos en JavaScript

Los objetos simples son la estructura principal de JavaScript para datos clave-valor, pero a diferencia de los arrays, los objetos no son directamente iterables — no puedes recorrerlos con for...of ni pasarlos directamente a métodos de array como map y filter. Para salvar esa brecha, JavaScript ofrece tres métodos complementarios que convierten las propiedades propias de un object en un array normal:

• Object.keys(obj) — un array con los nombres de las propiedades.
• Object.values(obj) — un array con los valores de las propiedades.
• Object.entries(obj) — un array de pares [key, value].

Una vez que la lista de propiedades es un array, todas las herramientas de array quedan disponibles. Un cuarto método, Object.fromEntries, realiza el proceso inverso, reconstruyendo un object a partir de una lista de pares. Esta página cubre cada método, cómo iterar de forma limpia con for...of y desestructuración, las reglas que determinan el orden de las propiedades y cómo difieren estos métodos de sus equivalentes en un Map.

Los tres métodos devuelven únicamente las propiedades propias (no heredadas) y enumerables con clave de tipo string del object. Omiten las propiedades del prototipo heredado y las claves de tipo Symbol.

Comprendiendo Object.keys

Object.keys(obj) devuelve un array con los nombres de las propiedades propias y enumerables de un object dado. Resulta útil cuando necesitas contar propiedades, verificar que existe una clave o recorrer las claves.

Ejemplo de uso de Object.keys

---

Explorando Object.values

Object.values(obj) devuelve un array con los valores de las propiedades propias y enumerables de un object dado, en el mismo orden que las claves devueltas por Object.keys.

Ejemplo de uso de Object.values

---

Aprovechando Object.entries

Object.entries(obj) devuelve un array de pares [key, value] propios y enumerables con clave de tipo string de un object dado. Es el más flexible de los tres porque cada elemento contiene ambas partes de la información.

Ejemplo de uso de Object.entries

---

Iterando con for...of y desestructuración

Dado que Object.entries devuelve un array, puedes recorrerlo con for...of y desempaquetar cada par mediante desestructuración. Esta es la forma más limpia y legible de recorrer las propiedades de un object:

---

También puedes iterar solo las claves o solo los valores:

---

Consejo: Usar for...of sobre Object.entries es preferible al bucle for...in simple, ya que for...in también recorre las propiedades enumerables heredadas de la cadena de prototipos, mientras que Object.entries no lo hace.

Transformando objetos con Object.fromEntries

Object.fromEntries invierte Object.entries: recibe una lista de pares [key, value] y construye un object. Juntos forman un ciclo completo — convertir un object en pares, transformar los pares con métodos de array y luego convertirlos de nuevo en un object.

Ejemplo: conversión de ida y vuelta

---

Object.fromEntries también acepta cualquier iterable de pares — incluido un Map — lo que lo convierte en una manera rápida de convertir un Map en un object simple. Consulta Map and Set para más información sobre los maps. Permite una conversión fluida entre estructuras de array y de object, facilitando un manejo de datos más flexible.

Reglas de orden de propiedades

El orden de las claves devueltas por estos métodos no es arbitrario — JavaScript sigue una regla definida:

1. Las claves de tipo entero (claves que parecen enteros no negativos, por ejemplo "1", "42") van primero, ordenadas en orden numérico ascendente.
2. Las claves de tipo string siguen, en el orden en que fueron insertadas.
3. Las claves de tipo Symbol van al final (aunque recuerda que estos métodos las ignoran de todos modos).

Este comportamiento de "las claves enteras se ordenan" sorprende a muchos desarrolladores:

---

Si necesitas preservar el orden de inserción para claves numéricas, haz que las claves no sean enteras — por ejemplo, añadiéndoles un prefijo + para que ya no sean de tipo entero:

---

Diferencia respecto a los métodos de Map

Un Map también tiene los métodos keys(), values() y entries(), pero se comportan de forma diferente a las versiones estáticas de Object.* en dos aspectos importantes:

• Sintaxis: Los métodos de Map se llaman sobre la instancia — map.keys() — mientras que los métodos de object son estáticos y reciben el object como argumento — Object.keys(obj).
• Tipo de retorno: Los métodos de Map devuelven un iterador (puedes recorrerlo con for...of, pero no es un array). Los métodos de Object.* siempre devuelven un array real, por lo que métodos de array como map, filter y reduce funcionan de inmediato.

---

Un Map también preserva el orden de inserción para todas las claves (incluidas las numéricas) y permite claves de cualquier tipo, mientras que los objetos simples convierten las claves a strings y ordenan las claves de tipo entero. Cuando el orden de iteración o las claves no string sean importantes, prefiere un Map.

Técnicas avanzadas de manipulación de objetos

Filtrado de propiedades de objetos

Combinar métodos de array con Object.entries y Object.fromEntries permite transformaciones potentes — como conservar solo las propiedades que superan una prueba.

Ejemplo de filtrado

---

Mapeo de propiedades de objetos

De igual forma, Object.entries combinado con map permite transformar cada valor (o clave) y reconstruir el object.

Ejemplo de mapeo

---

Conclusión

Object.keys, Object.values y Object.entries son el puente entre los objetos simples y el amplio conjunto de herramientas de array en JavaScript, mientras que Object.fromEntries cierra el ciclo convirtiendo pares de nuevo en objetos. Junto con for...of y la desestructuración, hacen que iterar, filtrar y transformar datos de objetos sea limpio y legible. Ten en cuenta las reglas de orden de propiedades y recurre a un Map cuando necesites un orden de inserción garantizado o claves que no sean string.

Práctica