Javascript Loops

There are several ways to do iterations in javascript through loops. This post explains the different looping methods that exist in Javascript.
You can execute all the codes described in this post from this site:
It allows you to execute Javascript code directly online without installing anything! 🙂
Javascript For loop
const list = ['Bulbasaur', 'Ivysaur', 'Venusaur'];
for (let i = 0; i < list.length; i++) {
document.write("Pokemon n°"+(i+1)+"</br>");
document.write(list[i]+"</br>");
}
Output :
Pokemon n°1 Bulbasaur Pokemon n°2 Ivysaur Pokemon n°3 Venusaur
The Break statement
Il existe une solution pour sortirde la boucle prématurement en utilisant l’instruction break :
- Vous pouvez interrompre une
for
boucle en utilisantbreak
- Vous pouvez avancer rapidement à la prochaine itération d’une
for
boucle en utilisantcontinue
const list = ['Bulbasaur', 'Ivysaur', 'Venusaur'];
for (let i = 0; i < list.length; i++) {
if(i==2){
break;
}
document.write("Pokemon n°"+(i+1)+"</br>");
document.write(list[i]+"</br>");
}
Output :
Pokemon n°1 Bulbasaur Pokemon n°2 Ivysaur
In the example below, if the value of “i” equals 2, then the program is forced to complete the next iterations of the loop. For this reason, only the first two values of the list are displayed in the output.
The Continue statement
The continue statement interrupts an iteration (in the loop) if a specified condition occurs, and continues with the next iteration in the loop.
The difference between the continue and break statement is that instead of jumping out of a loop, the continue statement jumps over an iteration of the loop.
const list = ['Bulbasaur', 'Ivysaur', 'Venusaur'];
for (let i = 0; i < list.length; i++) {
if(i==1){
continue;
}
document.write("Pokemon n°"+(i+1)+"</br>");
document.write(list[i]+"</br>");
}
Output :
Pokemon n°1
Bulbasaur
Pokemon n°3
Venusaur
We can see that the second iteration was well passed and that the loop continued on the next iteration.
Javascript forEach loop
The forEach() method allows to execute a given function on each element of the array. With this method, it is impossible to use the break statement to interrupt the loop. The function is not executed for array elements without values.
const list = [10,20,30,40];
list.forEach((item, index) => {
document.write("index "+index+", value : "+item+"</br>")
})
//index is optional
list.forEach(item => console.log(item))
Output :
index 0, value : 10 index 1, value : 20 index 2, value : 30 index 3, value : 40
Javascript do…While loop
const sites = ['amiradata.com', 'google.com', 'yahoo.com']
let i = 0
do {
document.write("site position : "+i+", value : "+sites[i]+"</br>")
i = i + 1
} while (i < sites.length)
Output :
site position : 0, value : amiradata.com site position : 1, value : google.com site position : 2, value : yahoo.com
We can break the loop with the break statement as follows:
do {
if (condition) break
} while (true)
You can go to the next iteration by using the continue statement :
do {
if (condition) continue
//next instructions
} while (true)
Javascript While loop
const sites = ['amiradata', 'google', 'yahoo.com']
let i = 0
while (i < sites.length) {
document.write("site position : "+i+", value : "+sites[i]+"</br>")
i = i + 1
}
Output :
site position : 0, value : amiradata.com site position : 1, value : google.com site position : 2, value : yahoo.com
We can also use the break and continue statement with this type of loop :
Break statement :
while (true) {
if (condition) break
}
Condition statement :
while (true) {
if (condition) continue
//next instructions
}
The main difference with do…while is that do…while always runs at least one iteration
Javascript for…in loop
Iterates all the enumerable properties of an object, giving the property names.
for (let property in object) {
document.write(property) //property name
document.write(object[property]) //property value
}
Javascript for…of loop
for (const value of ['red', 'blue', 'green']) {
document.write(value+"</br>") //value
}
//get the index as well, using `entries()`
for (const [index, value] of ['red', 'blue', 'green'].entries()) {
document.write(index+"</br>")
document.write(value+"</br>")
}
This loop creates a new scope in every iteration, so we can safely use that instead of let.
We are at the end of this tutorial, I hope you enjoyed it! 🙂 Don’t hesitate to tell me in comment !
Comments
Leave a comment