JS Object Iterations
In this page:
for (const key in object) {
// object[key]
}
Object.keys(object);
Object.values(object);
Object.entries(object);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.
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.
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.
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.
Example: Looping with for...in
// Declare the constant `user`, set to `{ name: "Sam", age: 30 }`
// Declare the constant `user`, set to `{ name: "Sam", age: 30 }`
const user = { name: "Sam", age: 30 };
// Loop over the enumerable keys of `user`, binding each to `key`
// Loop over the enumerable keys of `user`, binding each to `key`
for (let key in user) {
// Print `key, user[key]` to the console
// Print `key, user[key]` to the console
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.
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: