JavaScript objects are one of the most commonly used data structures, especially when working on web projects. Looping through JavaScript objects is not a very difficult task. JavaScript provides you with various methods to do so. In this blog, we are going to learn about some of the common methods like for…in loop to modern methods like Object.keys(), Object.values(), and Object.entries() that are used to iterate an object’s properties one by one.
Table of Contents:
Understanding JavaScript Objects
Before jumping into loops, it’s good to get an idea about objects in JavaScript. An object is a collection of key-value pairs where keys are usually strings, and values can be any data type (like numbers, strings, float, char, etc).
Example:
Output:
Explanation: Here in this example, a person object is there which has four key-value pairs you can print the whole object on the console or you can also print the value of a specific key by using the ( . ) operator like console.log(“Bob Marks: ” + person.marks) prints the marks of the bob given in person object.
Methods to Iterate Through JavaScript Objects
Looping or iterating through objects in JavaScript is not very difficult because JavaScript provides various methods to iterate over an object. Let’s discuss each one of them:
Method 1: Using for…in Loop
Using for…in Loop for iterating over an object is one of the traditional and simplest methods from all others. Here is how to use for…in loop to iterate over an object.
Example:
Output:
Explanation: In this example, the loop iterates through all enumerable properties of the person object and prints the key-value pairs. The hasOwnProperty check ensures that only the object’s own properties are accessed, not inherited ones.
Method 2: Using Object.keys() and forEach() Method
Object.Keys(obj) returns an array of the keys of an object, which can be iterated using the forEach() method.
Example:
Output:
Explanation: In this example, you’re using Object.keys() method to iterate over an object and print the key-value pairs. Here is how it works:
- Object.keys(person) returns an array of keys: [“name”, “name”, “Course_enroll”, “email”]
- forEach() loop iterates over each key and prints its value.
Method 3: Using Object.values() Method
If you only need values from an object then Object.values(obj) returns you the array of values.
Example:
Output:
Explanation: Here in this example, Object.values(person) returns an array of values: [1001, “John”, “Intellipaat ML Course”, “[email protected]”]
Method 4: Using for…of With Object.entries() Method
It is one of the other efficient ways to iterate over objects in JavaScript. It is simple to write and easy to understand.
Example:
Output:
Explanation: In this example, we are using Object.entries() that can give you an array of key-value pairs. And for…of loop is used to iterate through each pair and destructuring into keys and values.
Comparing Different Methods
Here is the comparison between all the different methods that are used to loop through JavaScript Objects:
| Method | Time Complexity | Best For |
| for…in | O(n) | Best for basic iteration over the objects. |
| Object.keys() + forEach() | O(n) | Iterating over keys only. |
| Object.value() | O(n) | If you want to get values only. |
| Object.entries() + forEach() | O(n) | Iterating over both keys and values. It is readable and efficient. |
Best Practices While Iterating Over An Object In JavaScript
Whenever you are iterating over objects in JavaScript, here, are some of the best practices that you need to follow to write optimized code and avoid errors.
- Use Object.keys(), Object.values(), or Object.entries() when you only need specific parts of an object like keys or values.
- Check for inherited properties when using for…in with hasOwnProperty().
Conclusion
Looping through objects in JavaScript is an essential skill especially when you’re working with APIs, or storing related pieces of data. JavaScript offers various methods to iterate over the object like for…in for general iteration and Object.keys(), Object.values() and Object.entries() for specific part of an object. Choosing the right one according to your case helps you to write clean and efficient code.
How Do I Loop Through a JavaScript Object – FAQs