4 Easy Ways to Loop Through Objects in JavaScript.

When looping through Arrays in JavaScript you have different ways to do that like ( using for loop and you also have array methods like forEach, flutter, and so on. But what if you want to loop through objects in JavaScript? In this article, we will deal with this problem and learn 4 ways to loop through objects using JavaScript to retrieve multiple key-value pairs.

How to loop through objects in JavaScript.

The various methods that can be used to loop through objects in JavaScript are:

Using For...in loop

This statement allows you to loop over the enumerable key properties of an object. Here's a basic syntax to give more insight.

const person =  {

name: "Emmanuel",

title: "Frontend dev",

language: "JavaScript"

}

for(const prop in person ){

console.log(prop)

}

This loop will iterate over each property in the person object, and the code inside the loop will print the property name. Keep in mind that for...in iterates over all enumerable properties.

The example, well returns this:

name

title

language

You can also iterate over the object value by passing in the value keyword to the console.

for(const prop in person ){

console.log(prop, person )

}

The example, well returns this:

name: “Emmanuel”

title: “Frontend dev”

language: “JavaScript”

you can see by just passing in the value keyword to the console the value was logged to the console.

Using Object.keys() method.

In JavaScript object.keys() is a method by which the constructor returns an array of an object's enumerable property names. It can also be used to loop through the keys of a given object.

The Keys method of the object constructor returns an array of the keys in an object. Here's a basic syntax to give more insight.

const person = {
  name: "Emmanuel",
  title: "Frontend dev",
  language: "JavaScript"
};

const keys = Object.keys(person);

for (const key of keys) {
  console.log(key);
}

The example, well returns this:

name

title

language

Since the key is now an array you can now use the forEach method to return the values of the properties.

keys.forEach(key => {
  const value = person[key];
  console.log(key, value); 
});

The example, well returns this:

name: "Emmanuel",

title: "Frontend dev",

language: "JavaScript"

In these examples, Object.keys(person) returns an array of the object's keys, and then you can iterate over this array to access each key and retrieve the corresponding value from the object.

Object.values() method.

The values method of the object constructor returns an array of values in an object, this method is often used in combination with a loop to iterate over the values of an object.

Here's a basic syntax to give more insight.

const person =  {

name: "Emmanuel",

title: "Frontend dev",

language: "JavaScript"

}

const values = Object.values(person)

console.log(values)

The example, well returns this:

[ "Emmanuel", "Frontend dev", "JavaScript" ]

Since the value is an array we can call an array method like forEach.

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

The example, well returns this:

Emmanuel

Frontend dev

JavaScript.

This method is useful when you're interested in the values of an object and don't necessarily need the corresponding keys. Keep in mind that Object.values() returns the values in the same order as a for...in loop, which means the order is not guaranteed to be the same as the order in which the properties were defined in the object.

Using Object.entries() method.

The object.entries() method of the Object constructor returns an array of subarrays where each subarray represents each property in the given object and there are two(2) values in the subarray: the key and the value. Here's a basic syntax to give more insight.

const person =  {

name: "Emmanuel",

title: "Frontend dev",

language: "JavaScript"

}

const entries = Object.entries(person)

console.log(entries);

In this example, Object.entries(person) returns an array like this:

[

name: "Emmanuel",

title: "Frontend dev",

language: "JavaScript"

]

Since the value is an array we can now use the forEach method.

const entries = Object.entries(person)

entries.forEach(entry => {
const key = entry[0]

const value = entry[1]

console.log(key, value)
});

In this example, well returns this:

name: "Emmanuel",

title: "Frontend dev",

language: "JavaScript"

Each method offers a different approach to object iteration, providing flexibility depending on the specific needs of your code.

Summary

These methods offer developers diverse options for object iteration, catering to specific coding requirements and enhancing overall flexibility in JavaScript development.