for...in vs for...of Loops

The For Loop

There are many ways to iterate in JavaScript, and probably one of the most common is for a loop.

The for statement is a type of loop that will use up to three optional expressions to implement the repeated execution of a code block. Let’s take a look at an example of what that means:

for (initialization; condition; final expression) {
  // code to be executed
}

// Initialize a for statement with 5 iterations
for (let i = 0; i < 5; i++) {
  // Print each iteration to the console
  console.log(`The number is ${i}`);
}

The number is 0
The number is 1
The number is 2
The number is 3
The number is 4

But in addition to this for loop, there are two other types of for iteration methods we can use: for...in and for...of.

The for...in Statement

The for...in statement iterates over all enumerable properties of an object that is keyed by strings (ignoring one keyed by Symbols), including inherited enumerable properties.

The syntax for...in looks like this:

for (const variable in enumerable) {
  // Do something
}

For example, to loop through and console.log all the values in this user Object:

const user = {
  name: 'Serhii',
  age: 29,
  email: 'shramko.dev@gmail.com',
  country: 'Ukraine',
  city: 'Kyiv'
}

for (const key in user) {
  console.log(`user.${key} = ${user[key]}`)
}

user.name = Serhii
user.age = 29
user.email = shramko.dev@gmail.com
user.country = Ukraine
user.city = Kyiv

We iterate through each key of the user Object, and then through this key we get the value with Bracket notation .

for...in and Objects

for...in is probably the easiest way to go through the object and use the key to get the value from it.

for...in and Arrays

The keys in the array are indexes (numbers).

const creatures = [
  "octopus",
  "squid",
  "shark",
  "seahorse",
  "starfish",
];

for (const index in creatures) {
  // We need access to creatures value by index
  console.log(creatures[index])
}

octopus
squid
shark
seahorse
starfish

for...in and Strings

const oceanCreature = 'Shark';

for (const index in oceanCreature) {
  console.log(oceanCreature[index])
}

S
h
a
r
k

The for...of Statement

The for...in statement is useful for iterating over object properties, but to iterate over iterable objects like arrays and strings, we can use the for...of statement. The for...of statement is a newer feature as of ECMAScript 6.

In this example of a for...of loop, we will create an array and print each item in the array to the console.

const sharks = ["tiger", "great white", "hammerhead"];

// Print out each type of shark
for (const shark of sharks) {
  // Unlike for...in, we don't need an index now
  // we have immediate access to the element of the array
  console.log(shark);
}

tiger
great white
hammerhead

for...of and Objects

The for...of loop doesn't work with Objects because they don't have a [Symbol.iterator] property. You can try but you will get an error:

"Uncaught TypeError: Object is not iterable"

Iterating over a DOM collection

Iterating over DOM collections like NodeList:

const paragraphElements = document.querySelectorAll('p');

for (const paragraph of paragraphElements) {
  // Make all paragraphs red
  paragraph.style.color = 'red';
}

Conclusion

In this post, we understood how for loops work and the difference between for...of and for...in statements.

Loops are an integral part of any programming language, as they are constantly used in places where you need to perform the same type of tasks several times.