How to Loop Through JavaScript Associative Arrays

Looping through a JavaScript associative array object in your JavaScript code is a great way to retrieve properties from the object. 

const obj = {
  a: 1,
  b: 2,
  c: 3
}
for (const key in obj) {
  const value = obj[key];
  console.log(key, value);
}

In this article, we’ll look at how to loop through a JavaScript associative array object using three different methods.

3 Ways to Loop Through JavaScript Associative Arrays

1. Use the for-in Loop

One way to loop through a JavaScript associative array object with the for-in loop. For instance, we can write:

const obj = {
  a: 1,
  b: 2,
  c: 3
}
for (const key in obj) {
  const value = obj[key];
  console.log(key, value);
}

We create an obj object with some key-value pairs. Then, we loop through the object keys with the for-in loop. We get the property value with obj[key] in the loop body.

Therefore, from the console log, we get:

a 1
b 2
c 3

More on JavaScriptHow to Set Up TypeScript in an Express App

2. Use the Object.entries With the forEach Method

We can use the Object.entries method to return an array of key-value pair arrays. Then, we can use the forEach method to loop through the array. For instance, we can write:

const obj = {
  a: 1,
  b: 2,
  c: 3
}
Object.entries(obj).forEach(([key, value]) => console.log(key, value));

We call forEach with a callback with an array with the key and value destructured from it. Then in the callback body, we log the key and value. Therefore, we get the same result as before.

More on JavaScriptHow to Filter a JavaScript Array With the Filter() Method

3. Use the for-of Loop

Another way to loop through the key-value pairs is to use the for-of loop. For example, we can write:

const obj = {
  a: 1,
  b: 2,
  c: 3
}
for (const [key, value] of Object.entries(obj)) {
  console.log(key, value)
}

We use Object.entries to return an array of key-value pair arrays. And we destructure the key and value from the destructured key-value arrays. We log the key and value from the console log.

As you can see, there are several ways we can loop through the key-value pair of an associative array object with JavaScript.

Frequently Asked Questions

const obj = {
  a: 1,
  b: 2,
  c: 3
}
for (const key in obj) {
  const value = obj[key];
  console.log(key, value);
}