for of loop in JavaScript

This post was originally published on webinuse.com

We have already written about loops in JavaScript in the article JavaScript Arrays Loops. Now we will introduce a new one – for of loop.

for of loop is similar to forEach loop, but with for of loop we can use break and continue. This is something that makes it even more appealing.

The syntax for for of loop is pretty simple and straightforward.

The first parameter of for of loop is the loop variable and the second parameter is the array that we are iterating through. If we want to break out from the loop, we have to use keyword break.

const arr = [1, 2, 3];

for (const el of arr) {
   if (el === 3) break;
   console.log(el)
}

//Result
//1
//2

Also, we can skip iteration by using keyword continue.

const arr = [1, 2, 3];

for (const el of arr) {
   if (el === 2) continue;
   console.log(el)
}

//Result
//1
//3

Often, while working with loops we need to know the current index. We can accomplish that, with for of loop, by using entries().

const arr = ['js', 'py', 'php'];

for (const el of arr.entries()) {
   console.log(el)
}

//Result:
//[0, 'js']
//[1, 'py']
//[2, 'php']

In the example above console.log returned the index and value of the current index, in the form of an array. But we can simplify this even further by destructuring the array. This means that we can extract values from the array, along with the index, as separate variables.

const arr = ['js', 'py', 'php'];

for (const [index, el] of arr.entries()) {
   console.log(index)
   console.log(el)
}

//Result:
//0
//js
//1
//py
//2
//php

But we have to be careful if we are using destructuring. ALWAYS index comes the first and element comes the second. Also, we can use const in this case, because every new iteration for of loop creates a new scope.

If you have any questions or anything you can find me on my Twitter, or you can read some of my other articles like What is object destructuring in JavaScript?.