Object Iteration in JavaScript
Object iteration in JavaScript involves traversing or looping over an object’s properties to access keys, values, or key-value pairs. This is essential for tasks such as processing object data, filtering properties, or transforming objects. Unlike arrays, objects are not inherently iterable with for...of, so JavaScript provides several methods for iterating over object properties.
The main techniques for iterating objects include:
for...inloop: Iterates over enumerable properties, including inherited ones.Object.keys(): Returns an array of the object’s own property names.Object.values(): Returns an array of the object’s own property values.Object.entries(): Returns an array of the object’s own key-value pairs.
for...in Loop
The for...in loop iterates over all enumerable properties of an object, including those inherited from its prototype.
const person = { name: "John", age: 30, city: "Mumbai" };
for (let key in person) {
console.log(`${key}: ${person[key]}`);
}
// Output:
// name: John
// age: 30
// city: Mumbai
With inherited properties:
function Person(name) {
this.name = name;
}
Person.prototype.role = "Developer";
const john = new Person("John");
for (let key in john) {
console.log(`${key}: ${john[key]}`);
}
// Output:
// name: John
// role: Developer
Use hasOwnProperty() to filter only the object’s own properties:
for (let key in john) {
if (john.hasOwnProperty(key)) {
console.log(`${key}: ${john[key]}`);
}
}
// Output: name: John
Object.keys()
Object.keys() returns an array of an object’s own enumerable property names, excluding inherited properties.
const person = { name: "John", age: 30, city: "Mumbai" };
const keys = Object.keys(person);
console.log(keys); // ["name", "age", "city"]
for (let key of keys) {
console.log(`${key}: ${person[key]}`);
}
// Output:
// name: John
// age: 30
// city: Mumbai
When you need only property names or want to use array iteration methods.
Object.keys(person).forEach(key => console.log(`${key}: ${person[key]}`));
Object.values()
Object.values() returns an array of an object’s own enumerable property values.
const person = { name: "John", age: 30, city: "Mumbai" };
const values = Object.values(person);
console.log(values); // ["John", 30, "Mumbai"]
for (let value of values) {
console.log(value);
}
// Output:
// John
// 30
// Mumbai
Object.entries()
Object.entries() returns an array of [key, value] pairs of an object’s own properties.
const person = { name: "John", age: 30, city: "Mumbai" };
const entries = Object.entries(person);
console.log(entries);
// [["name", "John"], ["age", 30], ["city", "Mumbai"]]
for (let [key, value] of entries) {
console.log(`${key}: ${value}`);
}
// Output:
// name: John
// age: 30
// city: Mumbai
With destructuring:
Object.entries(person).forEach(([key, value]) => {
console.log(`${key}: ${value}`);
});
Iterating Nested Objects
For objects with nested objects, you can use recursion or nested loops:
const person = {
name: "Alice",
address: { city: "Mumbai", country: "India" }
};
function iterate(obj) {
for (let [key, value] of Object.entries(obj)) {
if (typeof value === "object" && value !== null) {
iterate(value); // recursive iteration
} else {
console.log(`${key}: ${value}`);
}
}
}
iterate(person);
// Output:
// name: Alice
// city: Mumbai
// country: India