There are four ways you can loop through an object in JavaScript, and they are:

  1. for…in statement
  2. Object.entries()
  3. Object.keys()
  4. Object.values()

Let’s take a look at each of these methods and how they work:

Method 1: for…in statement

The first method and probably the simplest way to loop through an object is to use the for...in statement. This method will iterate all the properties in the object, and it works well on all browser versions like Internet Explorer.

An example code of for...in statement:

const object = {
  Name: "John Wick",
  Age: 55,
  Job: "Hitman",
  Nationality: "American",
};

for (const property in object) {
  console.log(`${property}: ${object[property]}`);
}

If you only want to check the properties in the object and not its prototypes since it can also inherit the properties from its prototype - use the hasOwnProperty method.

for (const property in object) {
  if (object.hasOwnProperty(property)) {
    console.log(`${property}: ${object[property]}`);
  }
}

If you don’t want to use hasOwnProperty, there are three other ways of looping through an object where you don’t need this method.

Method 2: Object.entries()

The second method to loop through an object is to use Object.entries(). This method will return an array of arrays, and each inner array will have two items. The first item is the property of the object and the second item is the value of the object.

After converting the object into an array, you can use looping methods like forEach() to loop through it.

An example code of Object.entries():

const object = {
  Name: "John Wick",
  Age: 55,
  Job: "Hitman",
  Nationality: "American",
};

Object.entries(object).forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});

Object.entries() is similar to the for...in statement except that it will not inherit the properties from the prototype.

Method 3: Object.keys()

The third method to loop through an object is to use Object.keys(). This method will return an array of the object’s keys.

Like Object.entries(), it will also convert into an array, and you can loop through it with forEach() to access the object’s keys and values.

An example code of Object.keys():

const object = {
  Name: "John Wick",
  Age: 55,
  Job: "Hitman",
  Nationality: "American",
};

Object.keys(object).forEach(key => console.log(key, ':', object[key]));

Method 4: Object.values()

The fourth and final method to loop through an object is to use Object.values(). This method will return an array of the object’s values only.

Like Object.entries() and Object.keys(), it will also convert into an array, and you can loop through it with forEach() as well.

An example code of Object.values():

const object = {
  Name: "John Wick",
  Age: 55,
  Job: "Hitman",
  Nationality: "American",
};

Object.values(object).forEach(value => console.log(value));

Conclusion

And there you go! These are the four ways you can loop an object in JavaScript.

The first method will directly loop through an object, but you’ll need to use hasOwnProperty to avoid its pitfall. The three other methods will convert the object into an array, and you will use a looping method like forEach() to loop them as if it’s an array.

Use any of these methods according to your use-cases or preferences.

Get my free e-book to prepare for the technical interview or start to Learn Full-Stack JavaScript