DEV Community

Shameel Uddin
Shameel Uddin

Posted on

🔄 Looping Through JavaScript Objects with Different Approaches 🔄

JavaScript objects are a fundamental part of the language, allowing you to store and manipulate data in key-value pairs. When it comes to iterating over the properties of an object, there are several approaches you can take. In this blog post, we'll explore some cool and efficient ways to loop through JavaScript objects.

The Sample Object

Before we dive into the looping techniques, let's define a sample object we'll be working with:

const person = {
  firstName: 'Shameel',
  lastName: 'Uddin',
  age: 99,
  email: 'shameel@uddin.com',
};
Enter fullscreen mode Exit fullscreen mode

This person object contains four key-value pairs, which we'll use for our examples.

1. For...In Loop

The traditional way to iterate over the properties of an object is by using a for...in loop. This loop iterates over the enumerable properties of an object.

for (const key in person) {
  if (person.hasOwnProperty(key)) {
    console.log(`${key}: ${person[key]}`);
  }
}
Enter fullscreen mode Exit fullscreen mode

Output:

firstName: Shameel
lastName: Uddin
age: 99
email: shameel@uddin.com
Enter fullscreen mode Exit fullscreen mode

The hasOwnProperty check is used to ensure that we only iterate over the object's own properties and not inherited ones.

2. For Loop

You can also use a traditional for loop to iterate over the properties of an object by accessing the keys using Object.keys().

const keys = Object.keys(person);
for (let i = 0; i < keys.length; i++) {
  const key = keys[i];
  console.log(`${key}: ${person[key]}`);
}
Enter fullscreen mode Exit fullscreen mode

Output (same as the for...in loop):

firstName: Shameel
lastName: Uddin
age: 99
email: shameel@uddin.com
Enter fullscreen mode Exit fullscreen mode

3. Object.keys()

The Object.keys() method returns an array of an object's own enumerable property names. You can then loop through this array using a for...of loop or other iteration techniques.

const keys = Object.keys(person);
for (const key of keys) {
  console.log(`${key}: ${person[key]}`);
}
Enter fullscreen mode Exit fullscreen mode

Output:

firstName: Shameel
lastName: Uddin
age: 99
email: shameel@uddin.com
Enter fullscreen mode Exit fullscreen mode

4. Object.values()

If you are interested in the values of the object's properties, you can use the Object.values() method. This method returns an array of an object's own enumerable property values.

const values = Object.values(person);
for (const value of values) {
  console.log(value);
}
Enter fullscreen mode Exit fullscreen mode

Output:

Shameel
Uddin
99
shameel@uddin.com
Enter fullscreen mode Exit fullscreen mode

5. Object.entries()

The Object.entries() method returns an array of an object's own enumerable property [key, value] pairs. This can be handy when you need both keys and values in your loop.

const entries = Object.entries(person);
for (const [key, value] of entries) {
  console.log(`${key}: ${value}`);
}
Enter fullscreen mode Exit fullscreen mode

Output:

firstName: Shameel
lastName: Uddin
age: 99
email: shameel@uddin.com
Enter fullscreen mode Exit fullscreen mode

6. forEach() Method

You can also use the forEach() method, which is available on arrays created from Object.keys(), Object.values(), or Object.entries().

Object.keys(person).forEach((key) => {
  console.log(`${key}: ${person[key]}`);
});
Enter fullscreen mode Exit fullscreen mode

Output:

firstName: Shameel
lastName: Uddin
age: 99
email: shameel@uddin.com
Enter fullscreen mode Exit fullscreen mode

7. Modern for...of Loop

With the introduction of the for...of loop in modern JavaScript, you can iterate directly over the Object.keys(), Object.values(), or Object.entries() results.

for (const key of Object.keys(person)) {
  console.log(`${key}: ${person[key]}`);
}
Enter fullscreen mode Exit fullscreen mode

Output:

firstName: Shameel
lastName: Uddin
age: 99
email: shameel@uddin.com
Enter fullscreen mode Exit fullscreen mode

Conclusion

Looping through JavaScript objects is a common task in web development. Depending on your specific use case and coding style, you can choose the most suitable approach for your project. Whether you prefer the classic for...in or for loop, or the modern for...of loop, JavaScript offers various methods to make object iteration more efficient and readable.

Happy coding! 🚀🤖

Follow me for more such content:
LinkedIn: https://www.linkedin.com/in/shameeluddin/
Github: https://github.com/Shameel123

Top comments (3)

Collapse
 
artydev profile image
artydev

Nice reminders
Thank you :-)

Collapse
 
brense profile image
Rense Bakker

Nice! Very complete and concice! 👍

Collapse
 
chukwuma1976 profile image
Chukwuma Anyadike

Great overview.