How to loop through object in javascript

Learn how to loop through an object in javascript.

Object is the backbone of the javascript and almost everything in it is object.

If we want to loop through the objects in javascript then we can do so with the for...in loop.

Using for...in loop

for...in loops iterates through each key of the given object and we can use that key to extract the value.

let obj = {
   item1: 42,
   item2: 'another thing',
   item3: function () {
	console.log('running!');
   }
};

for(let key in obj){
   console.log(obj[key]);
}

//42
//'another thing'
//function(){ console.log('running!');}

The only problem with for...in loop is the order of the key is not decided, Also it will pull the keys from the property hierarchy as well. To prevent that we can use hasOwnProperty() method.

for(let key in obj){
   //Only print own properties
   //Don't look into hierarchy
   if(obj.hasOwnProperty(key)){
     console.log(obj[key]); 
   }
}

//42
//'another thing'
//function(){ console.log('running!');}

---

After the introduction of ES6, now there are different methods available which can be used to loop through an object in javascript.

1. Object.keys().
2. Object.entries().
3. Object.values().
4. for...of loop.

Using Object.keys() to loop through an object

If you want to loop an object in order of the keys then we can use the Object.keys() method.

This method returns an array of keys of own properties names, we can then loop through these keys and access the values of the object.

let obj = {
   item1: 42,
   item2: 'another thing',
   item3: function () {
	  console.log('running!');
   }
};

let keys = Object.keys(obj);

console.log(keys);
//["item1", "item2", "item3"]

keys.forEach(e => {
   console.log(obj[e]);
});

//42
//'another thing'
//function(){ console.log('running!');}

---

Using Object.values()

This method will return an array of values of own enumerable properties of the object. The values are returned in the same order as by the for...in method.

let obj = {
   item1: 42,
   item2: 'another thing',
   item3: function () {
	  console.log('running!');
   }
};

let values = Object.values(obj);

console.log(values);
//[42, 'another thing', function() { console.log('running!'); }]

values.forEach(e => {
   console.log(e);
});

//42
//'another thing'
//function(){ console.log('running!');}

---

Using Object.entries()

This method returns an array of key value pair of own enumerable properties of the given object in the same order as it is returned by for...in loop.

let obj = {
   item1: 42,
   item2: 'another thing',
   item3: function () {
	  console.log('running!');
   }
};

let entries = Object.entries(obj);

console.log(entries);
//[["item1", 42], ["item2", "another thing"], ["item3", function(){console.log("running!")}]]

entries.forEach(e => {
   console.log(`key: ${e[0]}`,`value: ${e[1]}`);
});
//"key: item1" "value: 42"
//"key: item2" "value: another thing"
//"key: item3" "value: function () {
//    console.log('running!');
//  }"

We can use the new for...of loop as well to loop through the entries of the object.

for(let [key, value] of entries){
  console.log(`key: ${key}, value: ${value}`);
}

//"key: item1" "value: 42"
//"key: item2" "value: another thing"
//"key: item3" "value: function () {
//    console.log('running!');
//  }"