Home » Tutorials » Learn Javascript » JavaScript Looping Through Objects (for…in, for…of)

Learn Javascript

 Prev

JavaScript Looping Through Objects (for…in, for…of)

We can loop through objects in JavaScript by using the for…in loop.

Like we looped through arrays using built-in array methods, explained in our 👉 JavaScript Looping Through Arrays lesson, we can also loop through objects but by using the for…in loop.

JavaScript for…in loop 😲

The for…in loop in JavaScript loops over all the available properties of an object, making each property accessible to us.

Syntax

for (key in object) {
    // Code Block to be executed
}

Parameters

  • key: Refers to each key from each key: value pairs of the given object at the current iteration.
  • object: The object that we are currently iterating over.

Example 1

const programmingLanguage = {
  name: "Javascript",
  languageType: "Interpreted",
  createdBy: "Brendan Eich",
  firstAppearedIn: 1995,
};

// Here, "key" refers to each of the available "keys" of the object "programmingLanguage" like: "name", "languageType", "createdBy" and "firstAppearedIn".
for (const key in programmingLanguage) {
  console.log(`${key}: ${programmingLanguage[key]}`);
}

Output

name: Javascript
languageType: Interpreted
createdBy: Brendan Eich
firstAppearedIn: 1995

Example 2

const programmingLanguage = {
  name: "Javascript",
  languageType: "Interpreted",
  createdBy: "Brendan Eich",
  firstAppearedIn: 1995,
};

// You don't specifically have to type the word "key" in order to access the properties of the object. You can name it anything.
// Here, we referred to each "key" in the object "programmingLanguage" as "property"
for (const property in programmingLanguage) {
  console.log(`${property}: ${programmingLanguage[property]}`);
}

Output

name: Javascript
languageType: Interpreted
createdBy: Brendan Eich
firstAppearedIn: 1995

JavaScript for…of loop 🤯

The for…of loop in JavaScript loops over all the available values of an array.

So, if it used with an array, why are we explaining this in an Object lesson? 🤔 Well, the answer is, we can pretty much convert an Object into an array using Object.entries() where each element can be iterated using the for…of loop.

We have covered Object.entries() in our 👉 JavaScript Built-In Object Methods lesson.

Example

const programmingLanguages = ["C", "C++", "Javascript", "Python", "C#"];

for (const value of programmingLanguages) {
  console.log(`${value}`);
}

Output

C
C++
Javascript
Python
C#

Using for…of loop with Object.entries() 👇

The for…of loop pairs perfectly with the built-in object method Object.entries().

Object.entries() returns an array containing all the [key, value] pairs which we can iterate over using the for…of loop.

We have covered Object.entries() in our 👉 JavaScript Built-In Object Methods lesson.

Example

const programmingLanguage = {
  name: "Javascript",
  languageType: "Interpreted",
  createdBy: "Brendan Eich",
  firstAppearedIn: 1995,
};

for (const [key, value] of Object.entries(programmingLanguage)) {
  // As you can see, accessing each value is much easier when "for...of" loop is used with "Object.entries()".
  console.log(`${key}: ${value}`);
}

Output

name: Javascript
languageType: Interpreted
createdBy: Brendan Eich
firstAppearedIn: 1995

In this way, we can iterate over objects in JavaScript.

Next