How do you iterate over an object in JavaScript?

Iterating over an object in JavaScript involves accessing and manipulating the properties and values of the object.

There are several ways to iterate over an object, each with its advantages and disadvantages depending on the situation.

1. Using a for...in loop:

One of the most common ways to iterate over an object in JavaScript is by using a for...in loop. This loop iterates over all the enumerable properties of an object, including properties inherited from its prototype chain.

const myObject = {
  name: "John",
  age: 30,
  occupation: "Developer",
};

for (let prop in myObject) {
  console.log(prop + ": " + myObject[prop]);
}

Output:

name: John
age: 30
occupation: Developer

2. Using Object.keys() method:

Another way to iterate over an object is by using the Object.keys() method. This method returns an array of all the keys of the object.

We can then loop over this array and access the values of the corresponding properties.

const myObject = {
  name: "John",
  age: 30,
  occupation: "Developer",
};

const keys = Object.keys(myObject);

for (let i = 0; i < keys.length; i++) {
  console.log(keys[i] + ": " + myObject[keys[i]]);
}

Output:

name: John
age: 30
occupation: Developer

3. Using Object.values() method:

The Object.values() method returns an array of all the values of an object’s properties. We can then loop over this array and access the corresponding keys to get the property names.

const myObject = {
  name: "John",
  age: 30,
  occupation: "Developer",
};

const values = Object.values(myObject);

for (let i = 0; i < values.length; i++) {
  console.log(Object.keys(myObject)[i] + ": " + values[i]);
}

Output:

name: John;
age: 30;
occupation: Developer;

4. Using Object.entries() method:

The Object.entries() method returns an array of all the key-value pairs of an object’s properties. We can then loop over this array and access the corresponding key-value pairs.

const myObject = {
  name: "John",
  age: 30,
  occupation: "Developer",
};

const entries = Object.entries(myObject);

for (let i = 0; i < entries.length; i++) {
  console.log(entries[i][0] + ": " + entries[i][1]);
}

Output:

name: John
age: 30
occupation: Developer

5. Using forEach() method:

The forEach() method is a higher-order function that is available on arrays. However, we can also use it to iterate over an object by first converting the object to an array using Object.entries().

const myObject = {
  name: "John",
  age: 30,
  occupation: "Developer",
};

Object.entries(myObject).forEach(([key, value]) => {
  console.log(key + ": " + value);
});

Output:

name: John
age: 30
occupation: Developer

6. Using the for...of loop with Object.entries() method:

The for...of loop is another way to iterate over an array, but it can also be used to iterate over an iterable object, including the array returned by the Object.entries() method. This approach provides a cleaner syntax compared to the traditional for loop.

const myObject = {
  name: "John",
  age: 30,
  occupation: "Developer",
};

for (const [key, value] of Object.entries(myObject)) {
  console.log(key + ": " + value);
}

Output:

name: John
age: 30
occupation: Developer

7. Using the Object.getOwnPropertyNames() method:

The Object.getOwnPropertyNames() method returns an array of all the own properties (both enumerable and non-enumerable) of an object. We can then loop over this array and access the values of the corresponding properties.

const myObject = {
  name: "John",
  age: 30,
  occupation: "Developer",
};

const propertyNames = Object.getOwnPropertyNames(myObject);

for (let i = 0; i < propertyNames.length; i++) {
  console.log(propertyNames[i] + ": " + myObject[propertyNames[i]]);
}

Output:

name: John
age: 30
occupation: Developer

8. Using the Reflect.ownKeys() method:

The Reflect.ownKeys() method returns an array of all the own property keys (both enumerable and non-enumerable) of an object. We can then loop over this array and access the values of the corresponding properties.

const myObject = {
  name: "John",
  age: 30,
  occupation: "Developer",
};

const propertyKeys = Reflect.ownKeys(myObject);

for (let i = 0; i < propertyKeys.length; i++) {
  console.log(propertyKeys[i] + ": " + myObject[propertyKeys[i]]);
}

Output:

name: John
age: 30
occupation: Developer

9. Using a while loop with Object.entries() method:

We can also iterate over the array returned by the Object.entries() method using a while loop.

const myObject = {
  name: "John",
  age: 30,
  occupation: "Developer",
};

const entries = Object.entries(myObject);

let i = 0;
while (i < entries.length) {
  console.log(entries[i][0] + ": " + entries[i][1]);
  i++;
}

Output:

name: John
age: 30
occupation: Developer

Thank you for reading, and let’s have conversation with each other

Thank you for reading my article. Let’s have conversation on Twitter and LinkedIn by connecting.