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.

learn code with durgesh images

The main techniques for iterating objects include:

for...in loop: 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