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',
};

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]}`);
  }
}

Output:

firstName: Shameel
lastName: Uddin
age: 99
email: shameel@uddin.com

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]}`);
}

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

firstName: Shameel
lastName: Uddin
age: 99
email: shameel@uddin.com

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]}`);
}

Output:

firstName: Shameel
lastName: Uddin
age: 99
email: shameel@uddin.com

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);
}

Output:

Shameel
Uddin
99
shameel@uddin.com

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}`);
}

Output:

firstName: Shameel
lastName: Uddin
age: 99
email: shameel@uddin.com

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]}`);
});

Output:

firstName: Shameel
lastName: Uddin
age: 99
email: shameel@uddin.com

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]}`);
}

Output:

firstName: Shameel
lastName: Uddin
age: 99
email: shameel@uddin.com

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