JavaScript Loops - Looping Through Objects

Looping through objects in JavaScript allows you to access and manipulate key-value pairs within the object. In this guide, we'll explore how to use loops to iterate through objects and provide sample code to demonstrate the process.

Iterating Through an Object's Properties

The most common way to iterate through an object is by using a for...in loop. This loop iterates over the enumerable properties (keys) of an object:

const person = {
    firstName: 'John',
    lastName: 'Doe',
    age: 30
};
for (const key in person) {
    if (person.hasOwnProperty(key)) {
        console.log(key + ': ' + person[key]);
    }
}
    

The hasOwnProperty check ensures that only the object's own properties (not inherited properties from the prototype chain) are iterated.

Object.keys(), Object.values(), and Object.entries()

ES6 introduced several methods for working with object properties: Object.keys(), Object.values(), and Object.entries(). These methods allow you to access the keys, values, and key-value pairs of an object, respectively:

const car = {
    make: 'Toyota',
    model: 'Camry',
    year: 2022
};
const keys = Object.keys(car);
const values = Object.values(car);
const entries = Object.entries(car);
console.log('Keys:', keys); // Outputs: ["make", "model", "year"]
console.log('Values:', values); // Outputs: ["Toyota", "Camry", 2022]
console.log('Entries:', entries);
// Outputs: [
//   ["make", "Toyota"],
//   ["model", "Camry"],
//   ["year", 2022]
// ]
    

Using forEach() with Object.keys()

You can also use the forEach() method in combination with Object.keys() to iterate through an object's properties:

const book = {
    title: 'JavaScript for Beginners',
    author: 'John Smith',
    pages: 200
};
Object.keys(book).forEach(function(key) {
    console.log(key + ': ' + book[key]);
});
    

Conclusion

Looping through objects is essential for working with structured data in JavaScript. The ability to access and manipulate key-value pairs within objects allows you to perform various tasks and data processing operations efficiently.

Practice iterating through objects in your JavaScript projects to better understand and leverage this fundamental concept.