How to Loop Through Object in JavaScript

A Complete Guide How to Loop Through Object in JavaScript

by

JavaScript has become the language of the web now. It’s really important for web developers to know and learn JavaScript in depth in order to become good developers. In this blog, we will see multiple different ways of how to loop through an object in JavaScript. We use Arrays for this purpose in most of the cases. The looping or iteration can be split into two main approaches.

  • for..in statement
  • Converting the object to an Array and then applying different looping methods such as
    • forEach method
    • for…of statement
    • for statement
    • while statement

These approaches iterate only over enumerable object properties.

Let’s look into all the methods one by one in brief.

1. for..in statement

Example code:

for (let property in car) {
 console.log(`${property}: ${car[property]}`)
}

// Output:
// "name: BMW"
// "model: X1"
// "year: 2022"
// "isUsed: true"
// "transmission: manual"

We see that the code is clear and gives simple instructions inside which we get access to both the property name and property value. A major disadvantage is that it loops over all the properties and we can’t break this loop till it iterates over all the properties.

2. Converting an Object into an Array

This can be done in few different ways like:

  • Object.keys() – This returns an array of an object’s own enumerable property names.
  • Object.values() – This returns an array of a given object’s own enumerable property value
  • Object.entries() – It gives back an array of the object’s enumerable string-key property in pairs

2.1 forEach Method

Example code:

carKeys.forEach((carKey, index) => {
  console.log(`${index}. ${carKey}: ${car[carKey]}`)
});

// Output:
// "0. name: BMW"
// "1. model: X1"
// "2. year: 2015"
// "3. isUsed: true"
// "4. transmission: manual"

We get both object property name and property value using forEach method in each Array entry. The callback function accepts four arguments, those are currentValue, index, array, thisArg.

2.2 for …of Statement

Example code:

for (let carKey of carKeys) {
  console.log(`${carKey}: ${car[carKey]}`)
}

// Output:
// "name: BMW"
// "model: X1"
// "year: 2015"
// "isUsed: true"
// "transmission: manual"

This statement iterates over iterable objects just like how an Array does. It’s similar to for…in statement and what makes them different is how they iterate over. For..in statement executes code once per Array entry without taking additional arguments.

2.3 for statement

Example code:

for (let i = 0; i < carKeys.length; i++) {
  console.log(`${i}. ${carKeys[i]}: ${car[carKeys[i]]}`)
}

// Output:
// "0. name: BMW"
// "1. model: X1"
// "2. year: 2015"
// "3. isUsed: true"
// "4. transmission: manual"

We can also use break statements here which is an advantage over the other methods discussed above.

2.4 while loop

Example code:

let i = 0
while (i < carKeys.length) {
  console.log(`${i}. ${carKeys[i]}: ${car[carKeys[i]]}`)
  i++
}

// Output:
// "0. name: BMW"
// "1. model: X6"
// "2. year: 2015"
// "3. isUsed: true"
// "4. transmission: manual"

Hope the article was helpful to you and you learnt something new about the object as a array with this article. Feel free to put up your doubts, queries and suggestions in the comment box below.

Happy learning.

Leave a Comment