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
- Using Object.keys
- Using Object.values
- Using Object.entries
- Using for in loop
- 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