In this article, we will learn about the while and do-while loop in JavaScript with the help of examples.
Loops are used in programming to repeat a block of code. For example, If we want to show a message 100 times, we can use a loop. It’s just a simple example; loops can accomplish a lot more.
We learned about the JavaScript for loop in the previous tutorial. We’ll learn about while and do-while loops in this section.
JavaScript while loop
The while loop has the following syntax:
while (condition) { // body of loop } |
Here,
The condition inside the parenthesis is evaluated by a while loop ().
The code inside the while loop is executed, if the condition evaluates to true.
The situation is assessed once more.
This process is repeated until the condition is no longer true.
The loop ends when the condition evaluates to false.
Example 1: Display numbers from 1 to 5 using while loop
// initialize the variable let i = 1, n = 5; // while loop from i = 1 to 5 while (i <= n) { console.log(i); i += 1; } |
Output:
1 2 3 4 5 |
This is how this program functions:
Iteration | Variable | Condition: i <= n | Action |
---|---|---|---|
1st | i = 1 n = 5 | true | 1 is printed. i is increased to 2. |
2nd | i = 2 n = 5 | true | 2 is printed. i is increased to 3. |
3rd | i = 3 n = 5 | true | 3 is printed. i is increased to 4. |
4th | i = 4 n = 5 | true | 4 is printed. i is increased to 5. |
5th | i = 5 n = 5 | true | 5 is printed. i is increased to 6. |
6th | i = 1 n = 5 | false | The loop is terminated |
Example 2: Sum of Positive Numbers only using while loop
// if the user enters a negative numbers, the loop ends // the negative number entered is not added to sum let sum = 0; // take input from the user let number = parseInt(prompt(‘Enter a number: ‘)); while(number >= 0) { // add all positive numbers sum += number; // take input again if the number is positive number = parseInt(prompt(‘Enter a number: ‘)); } // display the sum console.log(`The sum is ${sum}.`); |
Output:
Enter a number: 42 Enter a number: 3 Enter a number: 8 Enter a number: 5 Enter a number: -7 The sum is 58. |
The user is prompted to enter a number in the above program.
Because prompt() takes user input as a string, parseInt() is used here. It also behaves like a string when numeric strings are added. For example, ‘2’ + ‘3’ equals ’23’. As a result, parseInt() turns a numeric string into a number.
Until the user enters a negative number, the while loop continues. The number entered by the user is added to the sum variable during each iteration.
The loop ends when the user enters a negative number. Finally, the total sum is displayed.
JavaScript do-while loop
The do-while loop has the following syntax:
do { // body of loop } while(condition) |
Here,
At first, the loop’s body is executed. Then the situation is assessed.
The body of the loop inside the do statement is executed again, if the condition evaluates to true.
The situation is assessed once more.
The body of the loop inside the do statement is executed again if the condition evaluates to true.
This process is repeated until the condition is determined to be false. The loop then comes to an end.
Note: It’s worth noting that the do-while loop is similar to the while loop. The only difference is that the body of the loop is executed at least once in the do-while loop.
Example 3: Display Numbers from 1 to 5 using do-while loop
let i = 1; const n = 5; // do-while loop from 1 to 5 do { console.log(i); i++; } while(i <= n); |
Output:
1 2 3 4 5 |
This is how this program functions:
Iteration | Variable | Condition: i <= n | Action |
---|---|---|---|
i = 1 n = 5 | not checked | 1 is printed. i is increased to 2. | |
1st | i = 2 n = 5 | true | 2 is printed. i is increased to 3. |
2nd | i = 3 n = 5 | true | 3 is printed. i is increased to 4. |
3rd | i = 4 n = 5 | true | 4 is printed. i is increased to 5. |
4th | i = 5 n = 5 | true | 5 is printed. i is increased to 6. |
5th | i = 6 n = 5 | false | The loop is terminated |
Example 4: Sum of Positive Numbers using do-while loop
// if the user enters negative number, the loop terminates // negative number is not added to sum let sum = 0; let number = 0; do { sum += number; number = parseInt(prompt(‘Enter a number: ‘)); } while(number >= 0) console.log(`The sum is ${sum}.`); |
Output 1:
Enter a number: 8 Enter a number: 74 Enter a number: 43 Enter a number: -23 The sum is 125. |
The do-while loop will continue in this case until the user enters a negative number. The loop ends when the number is negative; the negative number is not added to the sum variable.
Output 2:
Enter a number: -43 The sum is 0. |
If the user enters a negative number, the do-while loop only runs once.
Infinite while Loop
If a loop’s condition is always true, the loop will run infinitely (until the memory is full). For example,
// infinite while loop while(true){ // body of loop } |
Here’s an infinite do-while loop in action.
// infinite do-while loop const count = 1; do { // body of loop } while(count == 1) |
The condition is always true in the programs above. As a result, the loop body will run infinitely.
That’s all about the while and do-while loop in JavaScript.
You may like if-else Statements in JavaScript.
Hope this article will guide you to recognize the while and do-while loop in JavaScript that you needed and still if you have any problems or queries regarding this, post them in the comments section and we will be glad to assist you.
Pingback: continue and break Statements in JavaScript - Developers Dome
Pingback: Constructor JavaScript Function With Example - Developers Dome
Pingback: JavaScript Multidimensional Array with Example -
Pingback: JavaScript for...in loop with Example - Developers Dome