All topics
47 / 100
Objectsbeginner

Object.keys, values, entries, and Iteration

The three static methods for extracting an object's own enumerable properties as arrays, and how they interact with for...in and destructuring.

Three static methods turn an object into an array, which is what makes array methods usable on it.

Object.entries is like handing someone a spreadsheet export of a filing cabinet's own labeled folders (not the folders borrowed from a shared archive down the hall) — each row is a folder name paired with its contents, ready to be sorted, filtered, or rebuilt into a new cabinet.

Key Concepts

1
    const o = { a: 1, b: 2 };
2
    Object.keys(o)      // ['a', 'b']
    Object.values(o)    // [1, 2]
    Object.entries(o)   // [['a', 1], ['b', 2]]
3
All three return own, enumerable, string-keyed properties. Inherited properties, symbols and non-enumerable ones are excluded.
4
entries with destructuring is the idiomatic loop.
    for (const [key, value] of Object.entries(o)) {
      console.log(key, value);
    }
entries
5
And fromEntries is the inverse, which makes transformation a one-liner:
fromEntries
6
    const doubled = Object.fromEntries(
      Object.entries(o).map(([k, v]) => [k, v * 2])
    );
7
    // filter an object by its values
    Object.fromEntries(
      Object.entries(o).filter(([, v]) => v > 1)
    );
8
for...in is the one to avoid.
    for (const k in o) { }     // includes INHERITED enumerable keys
for...in
9
Which is why older code carries the guard:
10
    for (const k in o) {
      if (!Object.hasOwn(o, k)) continue;
      ...
    }
11
Object.keys already does what was meant, so the guard is only needed if you genuinely want inherited properties — which is rare.
Object.keys
12
Key order is defined, and it surprises people.
    const o = { b: 1, 2: 'two', a: 3, 1: 'one' };
    Object.keys(o);    // ['1', '2', 'b', 'a']
13
Integer-like keys come first, in ascending numeric order, then string keys in insertion order. So an object keyed by numeric ids does not preserve the order you inserted them.
14
A Map does preserve insertion order for every key type, which is one of the reasons to use one.
Map
15
Getting everything.
    Object.getOwnPropertyNames(o)    // includes non-enumerable
    Object.getOwnPropertySymbols(o)  // symbol keys
    Reflect.ownKeys(o)               // both
16
The practical set. Object.keys to count or check emptiness, entries to iterate or transform, fromEntries to rebuild, and Map when order or non-string keys matter.
Object.keysentriesfromEntriesMap
17
What the interviewer is probing.1. "Why prefer Object.keys to for-in?" Probing: the inherited properties. Stalls: "Style." Moves up: for-in walks the prototype chain, so inherited enumerable properties appear; Object.keys returns own properties only.
18
2. "What order do keys come back in?" Probing: the specification. Stalls: "Insertion order." Moves up: integer-like keys first in ascending order, then string keys in insertion order — which surprises people using numeric ids.
19
3. "How do you iterate a Map?" Probing: the difference. Stalls: "Object.keys." Moves up: directly, since a Map is iterable and preserves true insertion order with any key type.
20
4. "What does Object.entries give you?" Probing: the use. Stalls: "The values." Moves up: key-value pairs, which destructure cleanly in a for-of and convert back with Object.fromEntries.
Use cases:objectsiterationes6