Types of Loops in JavaScript

Loops are used to execute the same block of code again and again, as long as a certain condition is met. The basic idea behind a loop is to automate the repetitive tasks within a program to save time and effort. JavaScript now supports five different types of loops:

• while — loops through a block of code as long as the condition specified evaluates to true.
• do…while — loops through a block of code once; then the condition is evaluated. If the condition is true, the statement is repeated as long as the specified condition is true.
• for — loops through a block of code until the counter reaches a specified number.
• for…in — loops through the properties of an object.
• for…of — loops over iterable objects such as arrays, strings, etc.

In the following sections, we will discuss each of these loop statements in detail.

The while Loop

This is the simplest looping statement provided by JavaScript.

The while loop loops through a block of code as long as the specified condition evaluates to true. As soon as the condition fails, the loop is stopped. The generic syntax of the while loop is:

while(condition) {
 // Code to be executed
}

The following example defines a loop that will continue to run as long as the variable i is less than or equal to 5. The variable i will increase by 1 each time the loop runs:

var i = 1; while(i <= 5) {         
console.log("The number is " + i );     
i++; 
}

Output

The number is 1
The number is 2
The number is 3
The number is 4
The number is 5

The do…while Loop

The do-while loop is a variant of the while loop, which evaluates the condition at the end of each loop iteration. With a do-while loop the block of code executed once, and then the condition is evaluated, if the condition is true, the statement is repeated as long as the specified condition evaluated to is true. The generic syntax of the do-while loop is:

do {
 // Code to be executed
}
while(condition);

The JavaScript code in the following example defines a loop that starts with i=1. It will then print the output and increase the value of the variable i by 1. After that, the condition is evaluated, and the loop will continue to run as long as the variable i is less than, or equal to 5.

Example

var i = 1;
do {
    console.log("The number is " + i );
    i++;
}
while(i <= 5);

Output

The number is 1
The number is 2
The number is 3
The number is 4
The number is 5

The for Loop

The for loop repeats a block of code as long as a certain condition is met. It is typically used to execute a block of code for certain number of times. Its syntax is:

for(initialization; condition; increment) {
// Code to be executed
}

The parameters of the for loop statement have the following meanings:

• initialization — it is used to initialize the counter variables and evaluated once unconditionally before the first execution of the body of the loop.
• condition — it is evaluated at the beginning of each iteration. If it evaluates to true, the loop statements execute. If it evaluates to false, the execution of the loop ends.
• increment — it updates the loop counter with a new value each time the loop runs.

The following example defines a loop that starts with i=1. The loop will be continued until the value of the variable i is less than or equal to 5. The variable i will increase by 1 each time the loop runs:

Example

for(var i=1; i<=5; i++) {
    console.log("The number is " + i );
}

The for loop is particularly useful for iterating over an array. The following example will show you how to print each item or element of the JavaScript array.

Example

// An array with some elements
var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
 
// Loop through all the elements in the array 
for(var i=0; i<fruits.length; i++) {
    console.log(fruits[i] );
}

Output

Apple
Banana
Mango
Orange
Papaya

The for…in Loop

The for-in loop is a special type of a loop that iterates over the properties of an object, or the elements of an array. The generic syntax of the for-in loop is:

for(variable in object) {
 // Code to be executed
}

The loop counter i.e. variable in the for-in loop is a string, not a number. It contains the name of the current property or the index of the current array element.

The following example will show you how to loop through all properties of a JavaScript object.

Example

// An object with some properties 
var person = {"name": "Clark", "surname": "Kent", "age": "36"}; 
 
 // Loop through all the properties in the object  
 for(var prop in person) {     
  console.log(prop + " = " + person[prop]); 
 }

Output

name = Clark
surname = Kent
age = 36

The for…of Loop (ES6)

ES6 introduces a new for-of loop which allows us to iterate over arrays or other iterable objects (e.g. strings) very easily. Also, the code inside the loop is executed for each element of the iterable object.

The following example will show you how to loop through arrays and strings using this loop.

Example

// Iterating over array
let letters = ["a", "b", "c", "d", "e", "f"];
for(let letter of letters) {
    console.log(letter); // a,b,c,d,e,f
}
// Iterating over string
let greet = "Hello World!";
for(let character of greet) {
    console.log(character); // H,e,l,l,o, ,W,o,r,l,d,!
}

Output

a
b
c
d
e
f
H
e
l
l
o

W
o
r
l
d
!