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.<\/p>\n\n\n\n
Before moving forward, we should know what Objects are and how they behave.\u00a0<\/p>\n\n\n\n
Just like we use hashmaps in C++ that store data in the form of \u201ckey-value\u201d pairs, We use Objects in Javascript to store data in the same way, i.e. in the form of key-value pairs.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
For example, we have defined an object \u201ccar\u201d with various properties below:<\/p>\n\n\n\n
let car = {\n name: \"WagonR\",\n model: 2015,\n price: 340000\n};\n<\/code><\/pre>\n\n\n\nSeveral properties such as name, model, and price are defined for the object \u201ccar\u201d. The name, model, and price here indicate the keys, and \u201cWagonR\u201d, 2015 and 340000 are the values corresponding to the related keys.<\/p>\n\n\n\n
4 Ways to Loop through JavaScript Object<\/strong><\/h2>\n\n\n\nLooping 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. <\/p>\n\n\n\n
Let us get started with various methods to loop through an object in JS:<\/p>\n\n\n\n
1) Using for…in loop<\/strong><\/h3>\n\n\n\nThe simplest way to loop through an object in JavaScript is by using the for\u2026in loop.<\/strong> This loop is commonly used when we want to perform operations on all properties of an object.<\/p>\n\n\n\nLet us understand how to iterate over an object using a for-in loop in JS:<\/p>\n\n\n\n
\/\/declaring an object\nlet studentObject={\n name:'John',\n rollNumber:12\n};\n\n\/\/using for...in loop to iterate over the object and print the keys\nfor(let key in studentObject){\n \/\/printing the keys\n console.log(key);\n}<\/pre><\/div>\n\n\n\nOutput:<\/strong><\/p>\n\n\n\nname\nrollNumber\n<\/code><\/pre>\n\n\n\nIn this example, we have iterated over the keys of the object and printed them. We have got the desired result.\u00a0<\/p>\n\n\n\n
However, note that the for\u2026in 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.<\/p>\n\n\n\n
2) Using Object.keys()<\/strong><\/h3>\n\n\n\nKeys are typically used as the names of the identifiers to access the object\u2019s 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\u2026of loop. This method was introduced in ES6 and is supported in modern browsers. We will also use a for\u2026of loop along with it.<\/p>\n\n\n\n
Here\u2019s an example:<\/p>\n\n\n\n
\/\/declaring an object\nlet studentObject={\n name:'John',\n rollNumber:12\n};\n\n\/\/iterating using the Object.keys() and the for...of loop\nfor(let key of Object.keys(studentObject)){\n \/\/printing the key\n console.log(key);\n}<\/pre><\/div>\n\n\n\n