Objects are the most important data types in JS. This article will look into various methods to loop through an object in JavaScript. Looping is essential to perform various operations such as adding the values of an object, or to find the max and min value, etc. Well, let us get started by revisiting objects and digging deeper into how to iterate over them.
What are Objects in JavaScript?
Before moving forward, we should know what Objects are and how they behave.
Just like we use hashmaps in C++ that store data in the form of “key-value” pairs, We use Objects in Javascript to store data in the same way, i.e. in the form of key-value pairs.
So, Objects are non-primitive data types in Javascript that store an unordered collection of key-value pairs. The association between key values is called property, so objects are a collection of properties.
For example, we have defined an object “car” with various properties below:
let car = {
name: "WagonR",
model: 2015,
price: 340000
};
Several properties such as name, model, and price are defined for the object “car”. The name, model, and price here indicate the keys, and “WagonR”, 2015 and 340000 are the values corresponding to the related keys.
4 Ways to Loop through JavaScript Object
Looping through objects allows developers to access and manipulate key-value pairs within an object. It is useful for tasks such as data processing, dynamic property access, and object inspection. This process is particularly useful for iterating over an object’s properties and performing actions based on their values.
Let us get started with various methods to loop through an object in JS:
1) Using for…in loop
The simplest way to loop through an object in JavaScript is by using the for…in loop. This loop is commonly used when we want to perform operations on all properties of an object.
Let us understand how to iterate over an object using a for-in loop in JS:
//declaring an object
let studentObject={
name:'John',
rollNumber:12
};
//using for...in loop to iterate over the object and print the keys
for(let key in studentObject){
//printing the keys
console.log(key);
}Output:
name
rollNumber
In this example, we have iterated over the keys of the object and printed them. We have got the desired result.
However, note that the for…in loop is that it does not guarantee a specific order of iteration. The order in which properties are traversed may not correspond to the order in which they were added to the object.
2) Using Object.keys()
Keys are typically used as the names of the identifiers to access the object’s properties. The Object.keys() method allows us to obtain the keys of an object and we can iterate over them with the help of for…of loop. This method was introduced in ES6 and is supported in modern browsers. We will also use a for…of loop along with it.
Here’s an example:
//declaring an object
let studentObject={
name:'John',
rollNumber:12
};
//iterating using the Object.keys() and the for...of loop
for(let key of Object.keys(studentObject)){
//printing the key
console.log(key);
}Output:
name
rollNumber
In this example, we have iterated over the keys of the object and we have printed the corresponding keys. We have obtained the desired result.
We have a tutorial to check if the key exists in the JS object, which you might do before using this method.
3) Using Object.values()
Values represent the values corresponding to the keys in an object. The Object.values() method allows us to obtain the values corresponding to the keys of an object and iterate over them using the for…of loop. This method was introduced in ES8 and is supported in modern browsers.
Here’s an example of the same:
//declaring an object
let studentObject={
name:'John',
rollNumber:12
};
//iterating using the Object.values() and for...of loop
for(let value of Object.values(studentObject)){
//printing the value
console.log(value);
}Output:
John
12
In this example, we have iterated over the values of the object and we have printed the values corresponding to the keys.
4) Using Object.entries()
The key-value pairs as a whole are called entries. The Object.entries() method is used to convert the key-value pairs of an object as entities to a 2D array, so we try to iterate over that 2D array using a for…of loop. This method was also introduced in ES8 and is supported in modern browsers.
Here’s an example of the same:
//declaring an object
let studentObject={
name:'John',
rollNumber:12
};
//iterating using the Object.entries() and for...of loop
for(let entry of Object.entries(studentObject)){
//printing the key and value
console.log(entry[0]+' '+ entry[1]);
}Output:
name John
rollNumber 12
In this example, we iterated over each entry in the object and correspondingly printed the key-value pairs. We have obtained the desired result.
Note that The Object.keys() method is widely supported in all modern browsers, including Internet Explorer 9 and above but the Object.values() and Object.entries() methods have slightly less browser support.
Conclusion
In this article, we have discussed various techniques to loop through an object in JavaScript. It’s beneficial to know at least these basic methods as they are used very frequently when working on a Project.
