How to iterate through object in javascript?

If you are a javascript developer, you need to deal with javascript objects every day. Javascript object has a large use case but when you need to iterate through javascript, You might think how to do it because the object is not iterable we can not iterate javascript directly

So, .map, .foreach kind of function will not work and also you can not iterate it through for, for of loop directly

So let’s discuss how you can iterate through javascript object

1. Using Object.keys
2. Using Object.values
3. Using Object.entries
4. Using for in loop
5. Converting object into Map for better control

Using Object.keys

Object.keys method will return array of keys of an object

for eg.

const user = {
    name: 'xyz',
    age: 27,
    gender: 'male',
    email: 'xyz@xyz.com'
}
const userKeys = Object.keys(user);
for(let i = 0;i<userKeys.length;i++){
    let key = userKeys[i];//will get user object keys 'name','age','gender','email'
    let value = user[key];// will get user values of respected key
}

In the above example, we have created an array of user keys using Object.keys method and accessing user object value by iterating over user keys

Using Object.values

Object.values method will return an array of values of a given object. If you want an array of object values then Object.values help you to iterate through object values

for eg.

const user = {
    name: 'xyz',
    age: 27,
    gender: 'male',
    email: 'xyz@xyz.com'
}
const userValues = Object.values(user);
console.log(userValues); // ["xyz", 27, "male", "xyz@xyz.com"]
for(let i = 0;i<userValues.length;i++){
    let value = userValues[i];
    console.log(value)// will return every value of user object
}

As you can see in the above example, we have used Object.values function to convert user object into an array of user values and then you can iterate over it

Using Object.entries

Object.entries method will help you to create an array of key, value pair of a given object

for eg.

const user = {
    name: 'xyz',
    age: 27,
    gender: 'male',
    email: 'xyz@xyz.com'
}
const userEntries = Object.entries(user);
console.log(userEntries); //[["name", "xyz"], ["age", 27], ["gender", "male"], ["email", "xyz@xyz.com"]]
for (const [key, value] of userEntries) {
  console.log(key,value)// prints individual key and value of an userObject
}

In the above example, userEntries returns an array of array. In which each individual array is an array of keys and value of a user object. So using for of loop you can iterate over both key and value of an object

Using for in loop

for in loop specifically created for iterating over object

const user = {
    name: 'xyz',
    age: 27,
    gender: 'male',
    email: 'xyz@xyz.com'
}

for (const key in  user) {
  if(user.hasOwnProperty(key)){
    console.log(key) // prints key of an user object
    console.log(user[key])// prints  value of an user object 
  }
}

Above code iterate through object keys and we need call hasOwnProperty method to make sure for in loop should not iterate through prototype properties.

Converting object to Map

Map introduced in es6 and If we convert an object into Map then you can iterate Map using for, for of or also you can deal with every individual property using Map methods like get, set, delete, etc

for eg.

const user = {
    name: 'xyz',
    age: 27,
    gender: 'male',
    email: 'xyz@xyz.com'
}

const userEntries = Object.entries(user);
console.log(userEntries) //[["name", "xyz"], ["age", 27], ["gender", "male"], ["email", "xyz@xyz.com"]]
const userMap = new Map(userEntries);

In the above example, we first used object.entries method and then pass the userEntries to the new Map because. Map accepts data in an array of key-value pair types. So, we need to convert it first to the particular format

Thanks for reading, If you like this article please follow me on twitter