Loop object in javascript in 4 ways

A javascript object is a collection of key-value pairs, also known as its properties, enclosed between curly braces.
In this article, we will look at 4 different ways to loop over or iterate through the properties of an object with example programs.
[the_ad id=”651″] Example of a javascript object that we will be looping over in this article is

const gadget = {
    device: 'smartphone',
    brand: 'iphone',
    ram: '3GB',
    camera: 2
}

This object contains 4 properties or key-value pairs.
Remember that the value of a property can be accessed with its key enclosed between square brackets as object_name[key].
To learn about javascript objects in greater detail, refer this article.
Method 1: With for-in loop
A javascript object can be iterated using a for-in loop with the below syntax

for(let key in object_name) {
  // iteration logic
}

where key variable contains the key of an object entry in every iteration. Example,

const gadget = {
    device: 'smartphone',
    brand: 'iphone',
    ram: '3GB',
    camera: 2
}
// iterate with a for-in loop
for (const key in gadget) {
  // print keys and values
  document.write("Key = "+key+", Value = "+gadget[key]);
  document.write('<br>');
}

This prints

[the_ad id=”656″] Method 2: Using Object.keys()
Object.keys() method accepts an object as argument and returns an array of all the keys of that object. This array can then be iterated using a for-in loop. Example,

const gadget = {
    device: 'smartphone',
    brand: 'iphone',
    ram: '3GB',
    camera: 2
}

// get array of keys
let keys = Object.keys(gadget);
//iterate over array
for(let index in keys) {
  // get current key
  const key = keys[index];
  document.write("Key = "+key+", Value = "+obj[key]);
  document.write('<br>');	
}

Note that when you iterate over the array of keys, the loop variable will contain the index of the array element.
To access the key from keys array, you need to get it by its index as keys[index].
This prints

Browser compatibility of Object.keys() method is

Method 3: Using Object.entries()
Object.entries() method returns an array of entries or properties of an object.
Each element of this array is itself a javascript array whose first element is the key and second element is the value of the object property.
Thus, we can iterate over the array returned by Object.entries() as shown below

const obj = {
  device: 'smartphone',
  brand: 'iphone',
  ram: '3GB',
  camera: 2
}
// 
for (let entry of Object.entries(obj)) {
  document.write("Key = " + entry[0] + ", Value = "+ entry[1]);
  document.write('<br>');	
}

Note that the loop variable in every iteration is an array of an object entry or property whose first element is the key and second is the value of entry.
Thus, both key and value can be accessed using their numeric indexes 0 and 1 respectively.

Key and value of each entry can also be accessed using array destructuring where array elements can be directly assigned to variables.
Thus, for loop can be modified as shown below.

for (let [key, value] of Object.entries(obj)) {
  document.write("Key = " + key + ", Value = "+ value);
  document.write('<br>');	
}

Array destructuring is a concept that is added in ES6. You can learn it in more detail here.
Note that key and value are variables and you can name them something else as well.

This method uses a for-of loop which is again introduced in ES6.

Browser compatibility of Object.entries() method is

[the_ad id=”644″]

Method 4: Using forEach
Javascript forEach() function can be invoked on an array. It accepts a callback function as argument which is invoked for every array element one by one.

Callback function accepted by forEach() may have 3 arguments as
1. First is the array element on which forEach() is invoked,
2. Second is the index of array element, and
3. Third is the array itself.
Out of these, only the first one is mandatory, other two are optional.

Thus, we can invoke forEach() on the array returned by Object.keys() and use it to iterate over an object as shown below.

const obj = {
  device: 'smartphone',
  brand: 'iphone',
  ram: '3GB',
  camera: 2
}

Object.keys(obj).forEach(function(key) {
  document.write("Key = " + key + ", Value = " +obj[key]);
  document.write('<br>');	
});

This outputs

Callback function to forEach() can also be written as an ES6 arrow function as shown below.

Object.keys(obj).forEach(key => {
  document.write("Key = " + key + ", Value = " +obj[key]);
  document.write('<br>');	
});

[the_ad id=”647″] You are now familiar with different ways to iterate object properties in javascript and you can use any of the methods as appropriate.