Looping Over Objects

When you work with arrays, you have straightforward loops like for...of or .forEach(). But when you try to loop over a plain JavaScript object using for...of, you get a surprise.

const plainObj = { a: 1, b: 2 };
try {
  for (const val of plainObj) {
    console.log(val);
  }
} catch (e) {
  console.log(e.name + ": plainObj is not iterable");
}

TypeError: plainObj is not iterable

Plain objects are not iterable. You cannot loop over them directly with for...of. To loop through an object in JavaScript, you must first convert it into an array of its keys, its values, or both.

The Object Iteration Methods

JavaScript provides three static methods on the Object constructor to extract arrays from an object.

• Object.keys(obj) returns an array of the object’s own string-keyed property names.
• Object.values(obj) returns an array of the object’s own string-keyed property values.
• Object.entries(obj) returns an array of the object’s own string-keyed key-value pairs.

Let’s see them in action.

const user = { name: 'Alice', age: 25 };

console.log(Object.keys(user));
// Outputs: [ 'name', 'age' ]

console.log(Object.values(user));
// Outputs: [ 'Alice', 25 ]

[ 'name', 'age' ]
[ 'Alice', 25 ]

Notice that these methods return standard arrays. Because they are arrays, you can now use a for...of loop!

const scores = { math: 90, english: 85 };
const keys = Object.keys(scores);

for (const key of keys) {
  console.log(key, scores[key]);
}

math 90
english 85

Object.entries() and Destructuring

If you need both the keys and the values, Object.entries() is the most powerful tool. It transforms your object into a 2D array of [key, value] pairs.

When combined with array destructuring in a for...of loop, Object.entries() creates incredibly clean iteration logic.

const inventory = { apples: 5, oranges: 10 };

for (const [key, value] of Object.entries(inventory)) {
  console.log(`${key}: ${value}`);
}

apples: 5
oranges: 10

The for…in Loop

JavaScript also has a specialized loop called for...in. It is designed specifically for iterating over an object’s keys.

const settings = { theme: 'dark', notifications: true };

for (const key in settings) {
  console.log(key, settings[key]);
}

While for...in looks simpler than Object.keys(), there is a critical difference: for...in iterates over all enumerable string properties of an object, including inherited properties from the prototype chain. Object.keys() only returns the object’s own properties.

Because of this risk of accidentally looping over inherited methods or properties, modern JavaScript development heavily prefers Object.keys(), Object.values(), and Object.entries().

Iteration Order

A common misconception is that object properties are completely unordered. In modern JavaScript, iteration methods follow a specific, guaranteed order:

1. Integer keys (like '1', '2') are sorted in ascending numeric order.
2. String keys are returned in the chronological order they were inserted.
3. Symbol keys (which are ignored by Object.keys() and for...in) are returned last in insertion order.