How to Loop Through an Object in JavaScript

Looping through an object allows you to access and manipulate its properties and values. JavaScript provides several methods to iterate over objects. In this guide, we'll explore different techniques to loop through objects.

Using `for...in` Loop

The for...in loop is designed for iterating over the enumerable properties of an object.

const person = {
    name: 'Alice',
    age: 30,
    job: 'Engineer'
};

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

In this example:

for (const key in person): Iterates over all enumerable properties of the person object.
person.hasOwnProperty(key): Checks if the property belongs directly to the object, not inherited through the prototype chain.
console.log(`${key}: ${person[key]}`): Logs the property name and its value.

Using `Object.keys()`

Object.keys() returns an array of a given object's own enumerable property names, which can then be iterated over.

const person = {
    name: 'Alice',
    age: 30,
    job: 'Engineer'
};

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

In this example:

Object.keys(person): Returns an array of the object's property names.
forEach(key => ...): Iterates over each property name and accesses its value.

Using `Object.values()`

Object.values() returns an array of a given object's own enumerable property values. This method can be useful if you only need the values.

const person = {
    name: 'Alice',
    age: 30,
    job: 'Engineer'
};

Object.values(person).forEach(value => {
    console.log(value);
});

In this example:

Object.values(person): Returns an array of the object's property values.
forEach(value => ...): Iterates over each value and logs it.

Using `Object.entries()`

Object.entries() returns an array of a given object's own enumerable string-keyed property [key, value] pairs. This can be useful for both keys and values.

const person = {
    name: 'Alice',
    age: 30,
    job: 'Engineer'
};

Object.entries(person).forEach(([key, value]) => {
    console.log(`${key}: ${value}`);
});

In this example:

Object.entries(person): Returns an array of [key, value] pairs.
forEach(([key, value]) => ...): Iterates over each [key, value] pair and logs them.

Conclusion

JavaScript provides several ways to loop through objects, including using for...in, Object.keys(), Object.values(), and Object.entries(). Choose the method that best fits your needs based on whether you need to access just keys, values, or both.