This content originally appeared on DEV Community and was authored by Amer Sikira
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?.
This content originally appeared on DEV Community and was authored by Amer Sikira
Amer Sikira | Sciencx (2021-10-16T07:57:06+00:00) for of loop in JavaScript. Retrieved from https://www.scien.cx/2021/10/16/for-of-loop-in-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.