JavaScript Loops: For vs For of

JavaScript Loops

JavaScript, like many other programming languages, has many different kinds of loops. Some examples of these loops are while loops, for loops, for of loops, and for in loops.

Learning how and when to use the best kind of loop could be a bit overwhelming. Today we're going to talk about for loops and for of loops, which are two kinds that have a similar syntax.

One of the most frequent use-cases of a loop, is to iterate or loop over an iterable object like a string, array or any array-like object such as (NodeList, Map, Set). We'll be working with an array.

Let's take a look at the for loop syntax:

for (initialization; condition; final-expression) {
   statement
}

A for loop consists of three optional expressions (initialization; condition; final-expression).

Let's look at some code

In the example below, we have a nested array called myArray, which contains two other arrays, which contain number values in them. (I'll reference these two other arrays as inner arrays to help you follow the code example).

Operation

Let's say we need to get the total or the sum of the values inside of each of the inner arrays.

• First, we'll loop over myArray to get access to the inner arrays.
• Then, we'll loop over each of the inner arrays and add all values inside of each of the inner arrays to a variable called total and print the total.

Example with comments

Here is the same code without comments and extra spaces

What's happening here?

Quick Aside: On line 4, I created a variable called inner to hold the current value of each value inside myArray (the two inner arrays). This is optional, it just makes your loop more readable. You can always reference the value like this: myArray[i].length instead of inner.length.

Notice when we use a for loop we get access to the index of the array, which is i on the first loop and n on the second loop.

• Then we use i and myArray to get each value of myArray -> myArray[i].

• We also use n and inner to get each value of the inner array -> inner[n].

• Finally we add each value to the total variable total += inner[n] and print it to the console.

Behold: The 'For Of' Loop

First let's take a look at the syntax of a for of loop:

for (variable of iterable) {
  statement
}

• The for of loop will give you a more clean and readable syntax.

Now let's see the same code using a for of loop:

Much better

The first thing we notice is a much shorter and readable syntax.

On line 3, for (let inner of myArray); on each loop the variable inner will be assigned each of the arrays in myArray:

• On the first loop inner will be assigned [11, 22, 33].
• On the second loop inner will be assigned [55, 66, 77].

On line 5
for (let num of inner); on each loop num will be assigned the value of each number inside the current inner array:

• For the first inner array num will be assigned 11, then 22, then 33.
• For the second inner array num will be assigned 55, then 66, then 77.

The syntax of a for of loop is straight forward and concise.

Conclusion

When should we use a for loop or a for of loop?

A basic rule of thumb is, if you need access to the index of the values, then a for loop will be a good choice. If you just need the values, you can use a for of loop instead.

You can still get the index inside of a for of loop but it will use a different syntax. If you're curious, here is one last snippet:

Ok, that's it! I hope you liked this short article.
Now go ahead and practice what we learned replit and if you want to do some more reading on Array.prototype.entries() here is a link to MDN.

Thank you for reading and don't forget to connect with me!

LinkedIn