JavaScript Object.keys, values, entries

Iterating Over Objects in JavaScript

Plain objects are JavaScript's go-to structure for key-value data, but unlike arrays, objects aren't directly iterable — you can't loop over them with for...of or hand them straight to array methods like map and filter. To bridge that gap, JavaScript provides three companion methods that turn an object's own properties into a regular array:

• Object.keys(obj) — an array of the property names.
• Object.values(obj) — an array of the property values.
• Object.entries(obj) — an array of [key, value] pairs.

Once a property list is an array, every array tool becomes available. A fourth method, Object.fromEntries, runs the process in reverse, rebuilding an object from a list of pairs. This page covers each method, how to iterate cleanly with for...of and destructuring, the rules that determine property order, and how these methods differ from the equivalents on a Map.

All three methods return only the object's own (not inherited) and enumerable string-keyed properties. They skip inherited prototype properties and any Symbol keys.

Understanding Object.keys

Object.keys(obj) returns an array of a given object's own enumerable property names. This is useful whenever you need to count properties, check that a key exists, or loop over the keys.

Example Usage of Object.keys

---

Exploring Object.values

Object.values(obj) returns an array of a given object's own enumerable property values, in the same order as the keys returned by Object.keys.

Example Usage of Object.values

---

Leveraging Object.entries

Object.entries(obj) returns an array of a given object's own enumerable string-keyed [key, value] pairs. It is the most flexible of the three because each element carries both pieces of information.

Example Usage of Object.entries

---

Iterating With for...of and Destructuring

Because Object.entries returns an array, you can loop over it with for...of and unpack each pair using destructuring. This is the cleanest, most readable way to walk an object's properties:

---

You can also iterate keys or values alone:

---

Tip: for...of over Object.entries is preferable to a plain for...in loop, because for...in also walks inherited enumerable properties from the prototype chain, while Object.entries does not.

Transforming Objects with Object.fromEntries

Object.fromEntries reverses Object.entries: it takes a list of [key, value] pairs and builds an object. Together they form a round-trip — turn an object into pairs, transform the pairs with array methods, then turn it back into an object.

Example: Round-Trip Conversion

---

Object.fromEntries also accepts any iterable of pairs — including a Map — making it a quick way to convert a Map into a plain object. See Map and Set for more on maps. It enables seamless conversion between array and object structures, facilitating more flexible data handling.

Property Order Rules

The order of keys returned by these methods is not arbitrary — JavaScript follows a defined rule:

1. Integer-like keys (keys that look like non-negative integers, e.g. "1", "42") come first, sorted in ascending numeric order.
2. String keys follow, in the order they were inserted.
3. Symbol keys come last (but recall these methods ignore symbols anyway).

This "integer keys are sorted" behavior surprises many developers:

---

If you need to preserve insertion order for numeric keys, make the keys non-integer — for example by prefixing them with a + so they are no longer integer-like:

---

Difference From Map's Methods

A Map also has keys(), values(), and entries() methods, but they behave differently from the static Object.* versions in two important ways:

• Syntax: Map methods are called on the instance — map.keys() — while object methods are static and take the object as an argument — Object.keys(obj).
• Return type: Map methods return an iterator (you can loop it with for...of, but it's not an array). Object.* methods always return a real array, so array methods like map, filter, and reduce work immediately.

---

A Map also preserves insertion order for all keys (including numeric ones) and allows keys of any type, whereas plain objects coerce keys to strings and sort integer-like keys. When iteration order or non-string keys matter, prefer a Map.

Advanced Object Manipulation Techniques

Filtering Object Properties

Combining array methods with Object.entries and Object.fromEntries enables powerful transformations — such as keeping only the properties that pass a test.

Filtering Example

---

Mapping Object Properties

Likewise, Object.entries combined with map lets you transform every value (or key) and rebuild the object.

Mapping Example

---

Conclusion

Object.keys, Object.values, and Object.entries are the bridge between plain objects and the rich set of array tools in JavaScript, while Object.fromEntries closes the loop by turning pairs back into objects. Together with for...of and destructuring, they make iterating, filtering, and transforming object data clean and readable. Keep the property-order rules in mind, and reach for a Map when you need guaranteed insertion order or non-string keys.

Practice