Looping through an object In JavaScript can be quite challenging, especially for junior developers. The objects can be a different dataset in themselves such as an array of lists. 

We will deal with this problem together in this article.

How to loop through objects

When you have an array that is considered to be an object in JavaScript, you cannot iterate through the object properties using map(), forEach(), or a for…of loop. You will get errors.

There are four different methods of looping through JavaScript objects and they include:

  • For…in loop
  • Objects.keys method
  • Objects.entries method
  • Object.values method

For…in loop

The for…in loop is the most direct and simple way to loop through an object’s properties. The for…in loop works in modern and old browsers (supported by IE older versions).

Let’s say we have a JavaScript object like the one in the code snippet below;

var subject = {
  "subject1" :  "English",
  "subject2"  : "Physics",
  "subject3"  : "Mathematics",
  "subject4"  : "Computer Science"
};

Using the for…in loop, we can loop through all of the properties of subject {subject1, subject2,…} and get their keys and values.

See the full code snippet below;

var subject = {
  "subject1" :  "English",
  "subject2"  : "Physics",
  "subject3"  : "Mathematics",
  "subject4"  : "Computer Science"
};
for (var key in subject) {
    if (subject.hasOwnProperty(key)) {
        console.log(key + " -> " + subject[key]);
    }
};

In the example code above, the hasOwnProperty() method was used to check if the property explicitly belongs to the object because for…in method loops through the properties in the prototype chain. 

Since objects in JavaScript can inherit properties from their prototypes, the for…in the statement will loop through those properties as well.

Object.keys Method

Object.keys() method takes the object you want to loop over as an argument and returns an array containing all property's name.

Let us illustrate with an example

Creating an Object…

let homeEquipment = {
  "appliance1" :  "Washing Machine",
  "appliance2"  : "Coffee Maker",
  "appliance3"  : "Dish Washer",
  "appliance4"  : "Boiling Ring"
};

You can convert the object to isHave array. Then log into console to check for output…

let isHave = Object.keys(homeEquipment);
console.log(isHave);

You can then use any array looping method such as forEach() to iterate through the array ad retrieve the value of each property.

isHave.forEach((key, index) => {
    console.log(`${key} : ${homeEquipment[key]}`);
});

Object.keys() Method makes it easier to loop over objects.

This is the full code snippet:

let homeEquipment = {
  "appliance1" :  "Washing Machine",
  "appliance2"  : "Coffee Maker",
  "appliance3"  : "Dish Washer",
  "appliance4"  : "Boiling Ring"
};
let isHave = Object.keys(homeEquipment);
console.log(isHave); //log to console to check for output
isHave.forEach((key, index) => {
  console.log(`${key} : ${homeEquipment[key]}`);
});

Object.entries() Method

This method can be used for traversing an array, This method outputs an array of arrays with each inner array having 2 elements, the first element being the property and the second element is the value. Let us see how this works.

First create an object…

let animals = {
    tiger:1,
    cat:2,
    monkey:3,
    elephant:4
};

Use object.entries() method to return an array

let zoo = Object.entries(animals);
console.log(zoo);

Then use forEach() Method to loop over the objects as shown below…

let animals = {
    tiger:1,
    squirrel:2,
    monkey:3,
    elephant:4
};
let zoo = Object.entries(animals);
console.log(zoo);

//use forEach Method to loop over the objects
Object.entries(animals).forEach(([key, value]) => {
    console.log(`${key} : ${value}`)
});

Object.values() Method

This method returns the values of all the properties in the object as an array, Thereafter you can use any of the array looping methods to lop through the values array.

Let’s create an object of studentScore… 

let studentScore = {
    "Adam" : 89,
    "Brie" : 74,
    "Catherine" : 69,
    "Polly" : 45,
};

Log the object to the console to see if it outputs correctly…

console.log(studentScore);

Iterate over the object’s values using the forEach() method.

Object.values(studentScore).forEach(val => console.log(val));

Full code below:

let studentScore = {
    "Adam" : 89,
    "Brie" : 74,
    "Catherine" : 69,
    "Polly" : 45,
};
console.log(studentScore);
Object.values(studentScore).forEach(val => console.log(val));

Conclusion:

You can use any of the latest methods to loop through an object in JavaScript but if you are working with old browsers, for…in would be a good option.