How to Loop Through a Plain JavaScript Object

In the JavaScript language, an object is a specific data collection. These data collections contain one or more characteristics that define it, as well as methods for executing common tasks. However, looping through an enumerable data set is a typical difficulty for programmers. When hearing the term “loop” in JavaScript, programmers generally think of the many loops, such as for loops, forEach(), map(), and others. Unfortunately, these methods do not apply to the objects because the objects are not iterable.

This tutorial will demonstrate the ways to loop/iterate through a simple JavaScript object.

How to Loop Through a Plain/Simple JavaScript Object?

To loop/iterate through a simple JavaScript object, use the following methods:

for-in loop
Object.keys() method
Object.values() method
Object.entries() method

Method 1: Loop Through a Plain/Simple JavaScript Object Using for-in Loop

To loop through an object, use the “for-in” loop. It iterates across all enumerable string attributes of an object that are associated with an object.

Syntax
Use the provided syntax to use the for-in loop for looping through an object:

for (variable in object)

Example
Create an object with properties in key-value pairs:

var object = {
"JavaScript": 1,
"Java": 5,
"Python": 20,
"HTML": 2,
"CSS": 11
}

Loop over the object based on the keys of an object:

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

The output displays all the characteristics of the object in a key-value pair:

Method 2: Loop Through a Plain/Simple JavaScript Object Using Object.keys() Method

Each property in an object has a corresponding value, meaning each property comprises key-value pairs. You can extract the keys, values, or both keys and values as entries in an array using the object’s static methods. If you want to retrieve an object’s keys, utilize the “Object.keys()” method.

Syntax
Follow the given syntax to loop through an object to retrieve the properties/keys of an object:

Object.keys(object)

Example
Invoke the Object.keys() method and store the resultant array of keys of the object in variable “objKeys”:

const objKeys = Object.keys(object);

As you can see in the output, all the keys of an object has been successfully retrieved:

Method 3: Loop Through a Plain/Simple JavaScript Object Using Object.values() Method

For getting the values of an object against its properties, use the “Object.values()” method. It gives back an array of values for the properties/keys of an object.

Syntax
The given syntax is used to get the object’s values by looping through an object:

Object.values(object)

Example
Invoke the Object.values() method to get the values of an object against its properties:

const objValues = Object.values(object);

The output displays an array of values against the object’s properties:

Method 4: Loop Through a Plain/Simple JavaScript Object Using Object.entries() Method

You can also iterate through a plain/simple JavaScript object using the “Object.entries()” method. It generates an array of sub-arrays containing key-value pairs of the given object.

Syntax
The following syntax is used to get the entries of an object by looping an object:

Object.entries(object)

Example
Call the Object.entries() method on the object for retrieving all the entries of an object:

const objEntries = Object.entries(object);

Output

We have gathered all the necessary information relevant to loop through plain JavaScript objects with objects as members.

Conclusion

To loop through a plain/simple JavaScript object, use the “for-in” loop, “Object.keys()” method, “Object.values()” method, or the “Object.entries()” method. The for-in loop and the Object.entries() method are used to get all the key-value pairs in an object, while the Object.keys() are used for getting the keys and Object.values() for the values of an object. This tutorial demonstrated different ways to loop through a simple JavaScript object.