5 Type of JavaScript Loops – The Ultimate Guide

Today we are going to learn 5 type of JavaScript loops in detail with a complete tutorial and examples.

The simplest meaning of loop is to repeat something.

“A structure, series, or process, the end of which is connected to the beginning.”

In the programming term when we need to repeat a set of code statements for a specific time, we can use loops.  

In the JavaScript we have the following loop concepts available.

1. For loop
2. Do while
3. While 
4. For in
5. For of

You might be interested in jQuery clone a form elements with unique attributes.

JavaScript For Loop

JavaScript for loop is a widely used looping statement. It is very easy to use as given in the example below.

Syntax

Loop initiator, condition and increment/decrement statement all will be in the same line.

for (initiate Loop; Loop Condition; increment/decrement Statement) {
   // loop body
}

For loop example

var users = [
  'raj', 'neha', 'mukund', 'ravi', 'devid'
];

for( let i = 0; i < users.length; i++ ) {
  console.log('Hello - ' + users[i]);
}

Output

Console :

"Hello - raj"

"Hello - neha"

"Hello - mukund"

"Hello - ravi"

"Hello - devid"

JavaScript Do while loop 

JavaScript do while loop is a looping statement which can be used if we want to run the loop at least once and then need to check the condition to allow for the next loop.

As its name suggests, do something while the condition is true. So, this loop executes its purpose at once and then test the condition in the while statement, if that is true then the loop will execute again otherwise control will pass to the next statement.

Syntax

do {
  // loop body
} while ( loop condition );

Do while loop example

let j = 0;

do {
  console.log('Hello - ' + users[j]);
  j++;
} while ( j < users.length );

Output

Console :

"Hello - raj"

"Hello - neha"

"Hello - mukund"

"Hello - ravi"

"Hello - devid"

JavaScript While Loop

JavaScript while loop is similar to for loop, the only difference is loop initiator and increment/decrement statement.

Syntax

We have to declare our initiator statement first and then the condition will pass to the while loop. Next, in the while loop body we need to define our increment/decrement statement.

//initiate loop;

while ( loop condition ) {
   //loop body

  //increment/decrement statement
}

While loop example

let k = 0;

while ( k < users.length ) {
  console.log('Hello - ' + users[k]);
  k++;
}

Output

Console :

"Hello - raj"

"Hello - neha"

"Hello - mukund"

"Hello - ravi"

"Hello - devid"

JavaScript For In

JavaScript for in is another looping statement which is very interesting. Because here we don’t need loop initiator and increment decrement statement.

It will get the all indexes one by one from the array and terminate itself at the end of the array elements.

Syntax

We just need a condition for this loop that is to execute the following statements until we have an element remaining in the array.

for ( index in array ) {
  // loop body
}

For In loop example

for( index in users ) {
   console.log("Hello - " + users[index]);
}

Output

Console :

"Hello - raj"

"Hello - neha"

"Hello - mukund"

"Hello - ravi"

"Hello - devid"

JavaScript for of loop

JavaScript for of is similar to for in loop the major difference is that for in loop retrieve the index and for of loop retrieve the element value. 

It will break the loop when all elements of the array or object will be iterated.

Syntax

Again we just need a condition for this loop that is to execute the following statements until we have an element remaining in the array as in the JavaScript for in loop.

for ( element of array ) {
  // loop body
}

For of loop example

for( user of users ) {
   console.log("Hello - " + user);
}

Output

Console :

"Hello - raj"

"Hello - neha"

"Hello - mukund"

"Hello - ravi"

"Hello - devid"

Try Javascript loops on Codepen

Go To Sbsharma codepen

Open the console to see the output on codepen.

Hope you find this article useful.

See you in the next learning journey.