JavaScript Loops: For vs For of
Tags: javascript, node, react, beginners
Published: 2021-09-17 17:52:06

# 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

{% gist https://gist.github.com/AbeTavarez/a2a6f0a7906c8bf7732bb0bcabc510fc %}

### Here is the same code without comments and extra spaces

{% gist https://gist.github.com/AbeTavarez/5f20d5a1c33b921665a351daa8b5eb57 %}

### 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*:

{% gist 
https://gist.github.com/AbeTavarez/7a8adce67453e55e51daf6184cc6a469
%}

### 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:

{% gist
https://gist.github.com/AbeTavarez/8734125f1aa213c6da535bfa32e3176f %}

Ok, that's it! I hope you liked this short article. 
Now go ahead and practice what we learned [replit](https://replit.com/@abetavarez/For-of-Loops#index.js) and if you want to do some more reading on `Array.prototype.entries()` here is a link to [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/entries).

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

[LinkedIn](https://www.linkedin.com/in/efrenabrahametavarez/)