JS Object Iterations
In this page:
Getting Property Names with Object.keys()
Object.keys(obj) returns a real array containing just the object's own enumerable property names as strings -- useful whenever you need to know what properties an object has, or want to use array methods (map, filter) on that list of names.
Note: Use Object.keys(obj).length as a quick way to count how many properties an object has, since objects have no built-in .length property of their own.
Warning: Object.keys() only returns own properties, not ones inherited from a prototype -- which is usually exactly what you want, but worth knowing explicitly.
Example: Getting Property Names with Object.keys()
const user = { name: "Sam", age: 30 };
console.log(Object.keys(user));Getting Values with Object.values()
Object.values(obj) returns just the corresponding values as a real array, in the same order as Object.keys() would return their names -- useful when the property names themselves do not matter, only what is stored in them.
Note: Use Object.values() when you need to process or aggregate an object's data (like summing numeric values) without caring about the specific key names.
Warning: Object.values() and Object.keys() always return their results in the same relative order for a given object, which lets you safely pair up a key at index i with its value at index i if needed.
Example: Getting Values with Object.values()
const user = { name: "Sam", age: 30 };
console.log(Object.values(user));Getting Key-Value Pairs with Object.entries()
Object.entries(obj) returns an array of [key, value] pairs -- each a small two-item array -- combining the benefits of Object.keys() and Object.values() into one call, and pairing especially well with destructuring inside a for...of loop or a map() call.
Note: Use Object.entries() with for...of when you need both the key and value together while iterating, rather than calling Object.keys() and then looking up each value separately.
Warning: Object.entries() returns a genuinely new array of pairs each time it is called -- modifying the returned array does not affect the original object.
Example: Getting Key-Value Pairs with Object.entries()
const user = { name: "Sam", age: 30 };
console.log(Object.entries(user));Looping with for...in
for...in loops directly over an object's enumerable property names without an intermediate array, similar in spirit to for...of on an array -- a slightly older pattern than Object.keys()/entries(), but still commonly seen and occasionally more convenient for a simple loop.
Note: Guard a for...in loop with obj.hasOwnProperty(key) when the object might have inherited enumerable properties you specifically want to exclude.
Warning: for...in can technically include inherited enumerable properties from the prototype chain, unlike Object.keys()/values()/entries(), which only ever return own properties -- this distinction rarely matters for plain object literals, but is worth knowing.
Example: Looping with for...in
const user = { name: "Sam", age: 30 };
for (let key in user) {
console.log(key, user[key]);
}Choosing the Right Iteration Method
Object.keys()/values()/entries() are generally preferred in modern code, since they return real arrays that work naturally with array methods -- for...in remains valid, particularly for a simple direct loop, but the array-returning methods offer more flexibility for filtering, mapping, or sorting the results.
Note: Default to Object.entries() with for...of (or a chained array method) for most object iteration needs in new code, reaching for for...in mainly when working with or maintaining older code.
Warning: Mixing multiple iteration styles inconsistently across a codebase for the same kind of task can make the code harder to follow, even though all the approaches are individually valid.
Example: Choosing the Right Iteration Method
const user = { name: "Sam", age: 30 };
console.log(Object.entries(user).map(([key, value]) => `${key}: ${value}`));- Using for...in on an object without an own-property check, which can also iterate inherited properties from the prototype chain in some situations.
- Expecting Object.keys() (or for...in) to guarantee a specific property order matching insertion order for every possible key type -- while modern engines are quite consistent, integer-like keys are specifically sorted first, which can surprise you.
- Trying to use array methods like .map() directly on the object itself, when you need to convert it to an array first via Object.entries() or Object.values().
- Object.keys(obj) returns an array of the object's own enumerable property names.
- Object.values(obj) returns an array of just the corresponding values, and Object.entries(obj) returns an array of [key, value] pairs.
- for...in loops over an object's enumerable properties (including inherited ones, unless guarded against) directly, without needing an intermediate array.
Object.keys(), Object.values(), and Object.entries() are all supported in every modern browser; for...in has been supported since JavaScript's earliest versions.
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: