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:

https://js.do/

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 forboucle en utilisantbreak
• Vous pouvez avancer rapidement à la prochaine itération d’une forboucle 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 !

Back to the main menu