How to loop through an object in JavaScript

1for...of with Object.entries()Recommended

Object.entries(obj) returns an array of [key, value] pairs for the object's own enumerable string keys. Loop over it with for...of and destructure each pair in the loop head, so you never write obj[key]. When the values are themselves objects, you can destructure those too, in the same line.

const stock = { apple: 12, banana: 0, cherry: 7 };

for (const [fruit, count] of Object.entries(stock)) {
  if (count === 0) continue; // break and continue work in for...of
  console.log(`${fruit}: ${count}`);
}

// Object.entries returns a real array of [key, value] pairs
console.log(Object.entries(stock));

// Values that are objects: destructure them right in the loop head
const users = {
  ada: { role: "admin", active: true },
  linus: { role: "dev", active: false },
};
for (const [name, { role, active }] of Object.entries(users)) {
  console.log(name, role, active ? "active" : "inactive");
}

Prints apple: 12 and cherry: 7 (banana is skipped by the continue), then [ [ 'apple', 12 ], [ 'banana', 0 ], [ 'cherry', 7 ] ], then ada admin active and linus dev inactive. The array is built up front, so adding or deleting keys on the object inside the loop can't change which entries the loop visits.

2Object.keys() and Object.values()

When you only need one side, Object.keys gives the keys and Object.values gives the values, both as ordinary arrays. That means you can skip the loop entirely and use reduce, filter, some or .length. forEach also works on the result, but unlike for...of it has no way to stop early.

const stock = { apple: 12, banana: 0, cherry: 7 };

console.log(Object.keys(stock));
console.log(Object.values(stock));

// Both return plain arrays, so every array method works on them
const units = Object.values(stock).reduce((sum, n) => sum + n, 0);
console.log("units:", units, "kinds:", Object.keys(stock).length);

const soldOut = Object.keys(stock).filter((fruit) => stock[fruit] === 0);
console.log(soldOut);

// forEach reads well for side effects, but break and continue don't work in it
Object.entries(stock).forEach(([fruit, count]) => {
  console.log(fruit.padEnd(6), count);
});

Prints [ 'apple', 'banana', 'cherry' ], [ 12, 0, 7 ], units: 19 kinds: 3 and [ 'banana' ], then one line per fruit. Object.keys(obj).length is the standard way to count an object's properties; there is no obj.length. Inside forEach, return only ends the current callback, so if you need to stop at the first match, use for...of or .some()/.find() instead.

3for...in, inherited keys, and for...in vs for...of

for...in is the original way to enumerate an object, and it needs no helper. The catch is that it visits every enumerable key on the prototype chain, not just the object's own ones. That is why older code wraps its body in a hasOwnProperty check; today you write Object.hasOwn(obj, key). for...of is a different loop entirely: it works on iterables (arrays, strings, Map, Set), and a plain object isn't one.

const defaults = { theme: "dark" };
const settings = Object.create(defaults); // settings inherits theme
settings.fontSize = 14;
settings.tabs = true;

// for...in visits own AND inherited enumerable keys
for (const key in settings) {
  console.log("for...in:", key);
}

// Guard with Object.hasOwn to keep only the object's own keys
for (const key in settings) {
  if (!Object.hasOwn(settings, key)) continue;
  console.log("own:", key, settings[key]);
}

// Object.keys / values / entries are own keys only: no guard needed
console.log(Object.keys(settings));

// for...of needs an iterable, and a plain object is not one
try {
  for (const value of settings) console.log(value);
} catch (err) {
  console.log(err.name + ": " + err.message);
}

// On an array: for...in gives index strings, for...of gives the values
const tags = ["js", "node"];
for (const i in tags) console.log(typeof i, i);
for (const tag of tags) console.log(tag);

The first loop prints fontSize, tabs and then the inherited theme. The guarded loop prints own: fontSize 14 and own: tabs true, and Object.keys agrees: [ 'fontSize', 'tabs' ]. for...of on the object throws TypeError: settings is not iterable. On the array, for...in prints string 0 and string 1 (keys are always strings) while for...of prints js and node. The short rule: for...in walks the keys of any object, for...of walks the values of an iterable. Object.hasOwn replaces obj.hasOwnProperty(key) because it also works on objects made with Object.create(null), which have no such method.

4Mapping and filtering an object with Object.fromEntries()

Objects have no .map() or .filter(). The idiom is a round trip: Object.entries to get an array of pairs, the array method you need, then Object.fromEntries to turn the pairs back into an object. Because you return a [key, value] pair, the same pattern can change the values, drop entries, or rename and swap keys. The result is always a new object; the original is left alone.

const cents = { apple: 120, bread: 350, milk: 99 };

// There is no obj.map(): go to entries, map the pairs, come back
const dollars = Object.fromEntries(
  Object.entries(cents).map(([item, c]) => [item, (c / 100).toFixed(2)])
);
console.log(dollars);

// filter works the same way
const cheap = Object.fromEntries(
  Object.entries(cents).filter(([, c]) => c < 200)
);
console.log(cheap);

// Keys can change too: rename them, or swap keys and values
const byPrice = Object.fromEntries(
  Object.entries(cents).map(([item, c]) => [c, item])
);
console.log(byPrice);

// A reusable helper, like lodash's mapValues
const mapValues = (obj, fn) =>
  Object.fromEntries(Object.entries(obj).map(([k, v]) => [k, fn(v, k)]));
console.log(mapValues({ a: 1, b: 2 }, (n) => n * 10));

Prints { apple: '1.20', bread: '3.50', milk: '0.99' }, then { apple: 120, milk: 99 }, then { '99': 'milk', '120': 'apple', '350': 'bread' } and { a: 10, b: 20 }. Look at the swapped object: the numbers became string keys, and '99' moved to the front even though milk was added last. That is the key-ordering rule in section 6 at work. Object.fromEntries accepts any iterable of pairs, so it also turns a Map into a plain object.

5Which should you use?

6Key order, and when to use a Map instead

Every loop on this page returns keys in the same, fully specified order, and it is not simply insertion order. Integer-like keys ("0", "2", "10") come first, in ascending numeric order. Every other string key follows in the order it was added. Symbol keys are skipped entirely. If you need insertion order for every key, or keys that aren't strings, use a Map: it remembers insertion order and is iterable, so for...of loops over it directly.

const obj = { b: 1, 10: "ten", a: 2, 2: "two", "-1": "neg", 1.5: "x" };
obj.z = 3;
obj[0] = "zero";

// Integer-like keys first (ascending), then string keys in insertion order
console.log(Object.keys(obj).join(", "));

// So an object keyed by numeric IDs comes back sorted, not in the order you added
const byId = {};
byId[30] = "carol";
byId[4] = "ada";
byId[12] = "bob";
console.log(Object.values(byId));

// A Map keeps insertion order for every key, and for...of iterates it directly
const scores = new Map([[30, "carol"], [4, "ada"], [12, "bob"]]);
for (const [id, name] of scores) {
  console.log(id, name);
}
console.log([...scores.keys()], scores.size);

// Symbol keys are skipped by every loop above; Reflect.ownKeys includes them
const tagged = { name: "Ada", [Symbol("id")]: 7 };
console.log(Object.keys(tagged), Reflect.ownKeys(tagged));

The first line prints 0, 2, 10, b, a, -1, 1.5, z: the three integer keys in numeric order, then b, a, -1, 1.5 and z in the order they were added, because "-1" and "1.5" are not integer-like. The IDs come back as [ 'ada', 'bob', 'carol' ], sorted by ID. The Map prints 30 carol, 4 ada, 12 bob in insertion order, then [ 30, 4, 12 ] 3: its keys stay numbers and .size counts them. The last line is [ 'name' ] [ 'name', Symbol(id) ]. A Map also has .keys(), .values(), .entries() and .forEach((value, key) => …); note that forEach passes the value first.