while and do-while loops are also used to repeat block of code in Javascript. If you want to execute a block of code 100 times then we use loops.

In the previous article, we learned about for loop, Here we are going to learn about while and do-while loops.

JavaScript while Loop

The syntax of while loop is

// Syntax of while loop

// Initalization
while (condition) {
    // body of loop
    // Updation
}

In the above code,

1. A while loop evaluates the condition inside the parentheses ().
2. If the condition is true, The code inside the while loop is executed.
3. The condition is evaluated again.
4. This process repeats until the condition becomes false.
5. If the condition is false, the loop stops.

Flowchart of while loop

Example: Print the message five times on the console

// program to print message 5 times on console 
let num = 5; 
// looping from i = 1 to 5 
let i = 1;
while ( i <= num) { 
     console.log("Recursive Minds!"); 
     i++;
}

Output:

Recursive Minds!
Recursive Minds!
Recursive Minds!
Recursive Minds! 
Recursive Minds!

Let’s discuss how the program works.

1^st Iteration:  i = 1 and num=5, So, the condition is i<=num that is true, and it will print “Recursive Minds!” and the value of i increment by 1.

2^nd Iteration:  i = 2 and num=5, So, the condition is i<=num that is true, and it will print “Recursive Minds!” and the value of i increment by 1.

3^rd Iteration:  i = 3 and num=5, So, the condition is i<=num that is true, and it will print “Recursive Minds!” and the value of i increment by 1.

4^th Iteration:  i = 4 and num=5, So, the condition is i<=num that is true, and it will print “Recursive Minds!” and the value of i increment by 1.

5^th Iteration:  i = 5 and num=5, So, the condition is i<=num that is true, and it will print “Recursive Minds!” and the value of i increment by 1.

6^th Iteration:  i = 6 and num=5, So, the condition is i<=num that is False, and it will terminate the loop and our program complete its execution.

JavaScript do-while Loop

Syntax of do-while is

// Syntax of do-while

// Initalization
do {
    // body of loop
    // Updation
} while(condition)

In the above example

1. The body of the loop is executed first. The condition is then evaluated.
2. If the condition evaluates to true, the body of the loop within the do statement is re-executed.
3. The condition is evaluated again.
4. If the condition evaluates to true, the body of the loop within the do- Instruction is displayed again.
5. This process continues until the condition evaluates to false. Then the cycle stops.

Flowchart of do-while loop

Let’s see the example of do-while loop

Example: Print message 5 times on console

// program to print message 5 times on console 
let num = 5; 
// looping from i = 1 to 5 
let i = 1; 
do{ 
    console.log("Recursive Minds!"); i++; 
} while ( i <= num);

Output:

Recursive Minds!
Recursive Minds!
Recursive Minds!
Recursive Minds!
Recursive Minds!

Let’s discuss how the program works.

1^st Iteration:  i = 1 and num=5, In fist iteration condition is not checked, and it will print “Recursive Minds!” and the value of i increment by 1.

2^nd Iteration:  i = 2 and num=5, So, the condition is i<=num that is true, and it will print “Recursive Minds!” and the value of i increment by 1.

3^rd Iteration:  i = 3 and num=5, So, the condition is i<=num that is true, and it will print “Recursive Minds!” and the value of i increment by 1.

4^th Iteration:  i = 4 and num=5, So, the condition is i<=num that is true, and it will print “Recursive Minds!” and the value of i increment by 1.

5^th Iteration:  i = 5 and num=5, So, the condition is i<=num that is true, and it will print “Recursive Minds!” and the value of i increment by 1.

6^th Iteration:  i = 6 and num=5, So, the condition is i<=num that is False, and it will terminate the loop and our program complete its execution.

Infinite loop

When the condition inside the loop is always true it runs infinite times (Until memory is full). Let’s see the conditions for infinite loop.

// infinite while loop
let n = 5;
while(n > 0){
    console.log("Recursive Minds!");
}

Here we are not updating the value of n, So n is always greater than 0. So it goes into an infinite loop.

// infinite do...while loop
const n = 5;
do {
   // body of loop
} while(n == 5)

Here we are not updating the value of n, So n is always equals to 5 that why it goes into an infinite loop.

Thank you so much for reading

Happy Coding

For more detail visit MDN Docs

Some other articles on JavaScript

• Introduction to JavaScript
• Variable in JavaScript
• JavaScript Data Types
• Let var const in JavaScript
• Operators in JavaScript
• JavaScript Conditionals