How To Loop Through An Object in JavaScript

Published in

Nerd For Tech

3 min readJun 15, 2022

A loop in computing is an instruction that iterates or repeats or executes one or more statements over and over again.

Some loops execute the statement so long as the specified condition is true, while others execute the statement up to a number of times.

I’m sure there’s a loop functionality in your music player, where you can select a particular song to be repeated over and over again. This means that a loop basically repeats something!

Today, I will talk about how to loop through an Object. But before we continue, I would like you to understand what Objects are and how to create one.

A Refresher on Objects

What is an Object?

An Object is a special kind of array that stores data as a {key-value} pair. A single pair of this data is called a property of that object.

Below are some ways to create an object in JavaScript;

Using the object literal syntax { }

Using a constructor function

Using a factory function

Having refreshed your memory, I will show you different approaches to looping through an Object.

Before we proceed with any of the approaches, I would like you to understand these two Object methods.

Object.keys()

This method helps to retrieve all keys belonging to an Object as an Array

Object.values()

This method helps to retrieve all values belonging to an Object as an Array

With a knowledge of the object methods above, we can write a loop that will loop through an object.

APPROACH 1 ( Using a number as the Index )

Now, remember that an Object property is just a combination of a key and a value ie { key : value }. So using the Object.keys() method, we can retrieve all keys belonging to an Object, loop through the keys using a while-loop, and then with a particular key as a numeric index, we will retrieve the value that is assigned to it.

In the code above, the object has 3 properties and in order to loop through the object’s keys, we have to:

Query the length of the keys
Access all object keys and check the key that is present at the specified index.
Access all object values and check the value that is present at the specified index.

how to loop through an object approach 1

APPROACH 2 ( Using a key as the Index )

Recall that using Object.keys() method retrieves the object’s keys as an Array.

In this approach, we will use a for-each loop to loop through the object's keys which are returned as an Array, then with a particular key as the element at hand, we can access the value assigned to it.

how to loop through an object approach 2

APPROACH 3 ( Using for..in loop )

Considering the second approach above, we can achieve the same results by using the for ...in loop.

In this approach, we need to define the loop’s syntax to access each key present in the object. Then with each key accessed, retrieve the associated value.

This approach is by far the easiest way to loop through an Object.