Loop through Object Keys JavaScript [For, ForEach, and Map]

To loop through Object Keys in JavaScript, we need to use loops like For loop. Where we can access the key name and key values as shown below in the Example:

const userObj = {
    name: 'Emily',
    age: 24,
    height: 5.8
};

for (var key in userObj) {
    console.log(key+" : "+user[key]);
}

In our Last Example, as you can see, we are using for loop to loop through our object.
Where by using (var key in userObj) we are creating a variable key which will have all the key values from our object userObj.
And by using key variable we can get the key name and by using userObj[key] we will get the key value.
For example:
key = name (theKeyName)
userObj[key] = Emily (The KeyValue).

Loop through object keys Using forEach Loop

In order to loop through keys using ForEach loop, we need to use Object.keys() to access all the Object Keys. and after that, we can use ForEach Loop to loop through them.
Where forEach will return every key Name and Index number. But here we only need the KeyName and by using that we can print the Key name along with key values.

const userObj = {
    name: 'Emily',
    age: 24,
    height: 5.8
};

Object.keys(userObj).forEach((keyName)=>{
    console.log(keyName+": "+userObj[keyName])
})

Loop through an Array of objects in javascript

If you have Objects inside Arrays then you can Loop through that array and access each Object Key and Keyvalues easily.
Here we will use the For loop to Loop through the Array of objects, and increment the Key number so we can get all the Array Objects and at the end we will return every Object value using the KeyName.

var userObject = [
    {
        name: "John",
        age: 22,
        height: 6
    },
    {
        name: "Emily",
        age: 24,
        height: 5.9
    },
    {
        name: "Rick",
        age: 23,
        height: 5.11
    }
]

for(let i=0; i<userObject.length; i++){
    console.log("Name: "+userObject[i].name)
    console.log("Age: "+userObject[i].age)
    console.log("Height: "+userObject[i].height)
    console.log("\n")
}

Here as you can see, inside userObject we have 3 Objects.
By using the For loop, we are looping through every Object value.
By using let = 0 we are initializing the value for our variable i.
By using i<userObject.length, we are giving our loop condition, which says that this loop will run un-till our i's value is less than Objects length.
Next, we increment the i's value by using i++,
and at the end, log out every Object value using console.log("Name: "+userObject[i].keyName) where we are using the variable i as the Key value.
Which will return every Object Key Value one by one.

if you don't want to write the Keyname manually, then you can also loop through it too.
For that, we need another nested loop to loop through every key.

var userObject = [
    {
        name: "John",
        age: 22,
        height: 6
    },
    {
        name: "Emily",
        age: 24,
        height: 5.9
    },
    {
        name: "Rick",
        age: 23,
        height: 5.11
    }]


for(let i=0; i<userObject.length; i++){
    for(var key in userObject[i]){
        console.log(key+": "+userObject[i][key])
    }
    console.log("\n")
}

Here, instead of writing Key Names manually we are using Another nested loop to loop through Objects and by using (var key in userObject[i]) we are getting every key data from current object and printing that data using console.log(key+": "+userObject[i][key]).

Loop through Array object keys by using While Loop in JavaScript

The process of looping through Objects by using a While loop is very similar to For loop.
But some things like Variable declaration and incrementing values are a little different.
So we need to declare our variable outside (unlike for loop where we can do that inside) and after printing our Statements / Object Values we need to increment the variable value so that the next time it will start printing/returning Next Objects values.
Other the that it's very similar to the For loop.

var userObject = [
    {
        name: "John",
        age: 22,
        height: 6
    },
    {
        name: "Emily",
        age: 24,
        height: 5.9
    },
    {
        name: "Rick",
        age: 23,
        height: 5.11
    }]
    
    var i = 0;
    while(i<userObject.length){
        console.log("Name: "+userObject[i].name)
        console.log("Age: "+userObject[i].age)
        console.log("Height: "+userObject[i].height)
        console.log("\n")
        i++;
    }

Loop through Array object by using Do-While Loop in JavaScript

Just like the While loop, the Do-While loop kinda works the same. The only difference is that we provide our Conditions inside while(condition) and statements inside do{ statements}.
Other than that it's the same.

var userObject = [
    {
        name: "John",
        age: 22,
        height: 6
    },
    {
        name: "Emily",
        age: 24,
        height: 5.9
    },
    {
        name: "Rick",
        age: 23,
        height: 5.11
    }]
    
    var i = 0;
    do{
        console.log("Name: "+userObject[i].name)
        console.log("Age: "+userObject[i].age)
        console.log("Height: "+userObject[i].height)
        console.log("\n")
        i++;
    }while(i<userObject.length)

Loop through Array object keys using Map()

In JavaScript, if you are storing Multiple Objects inside an Array. Then you can use JavaScript Array map() to loop through them.
Where we don't have to worry about conditions, increasing values and Variables.
This JavaScript Map() function will automatically map through every Array Objects/Values and return the values One By One.
Important: Map() will only work with Arrays. So make sure your Objects are present inside an Array.

var userObject = [
    {
        name: "John",
        age: 22,
        height: 6
    },
    {
        name: "Emily",
        age: 24,
        height: 5.9
    },
    {
        name: "Rick",
        age: 23,
        height: 5.11
    }]
    
userObject.map((data) => {
    console.log("Name: "+data.name)
    console.log("Age: "+data.age)
    console.log("Height: "+data.height)
    console.log("\n")
})

In the Last Example, as you can see we are using Array Map() to map through the Array (of objects).
Where userObject.map will map through every data and return the data inside the (data) parameter.
So by using data, you can get each object's key values like name by using data.name, age by using data.age, and more.