JavaScript While Loop

The JavaScript While Loop is used to repeat a block of statements for given number of times, until the given condition is False. While loop start with the condition, if the condition is True then statements inside the while loop will be executed. If the given condition is false then it won’t be executed at least once. It means, while loop may execute zero or more time and the syntax of while loop is:

JavaScript While Loop Syntax

The syntax of the While loop in JavaScript is as follows:

While( Condition )
 {
   statement 1;
   statement 2;
    ………….
 }
This is the statement Outside the While Loop

First compiler will check for the condition inside the While loop. If the Condition is True then the statement or group of statements under the while loop block will be executed. If the Condition is False then compiler will come out of the loop and execute other statements outside the while loop.

TIP: For single statement curly braces are not required but if we omit them for multiple statements then it will execute the first statement only. It is always good practice to use braces all the time.

JavaScript While Loop Flow Chart

The JavaScript While loop will check for the condition at the beginning of the loop.

If the condition is True then it will execute the statements inside the loop.
Next we have to use Increment and Decrement Operator inside the while loop to increment and decrements the value. Please refer Increment and Decrement Operators in JavaScript article to understand the functionality
Again it will check for the condition after the value incremented. As long as the condition is True, the statements inside the while loop will be executed.
If the condition is False then it will exit from the While loop

Let us see the While loop example for better understanding

JavaScript While Loop Example

In this program, we declared a variable number and assigned value 6. Using this value, compiler will add those values up to 10.

JAVASCRIPT CODE

<!DOCTYPE html>
<html>
<head>
    <title> JavaScript While Loop </title>
</head>

<body>
    <h1> JavaScript While Loop </h1>
<script>
    var number = 6, total=0;
    while (number <= 10)
    {
        total = total + number;
        number++;
    }
    document.write("Value of Total From the While Loop is = ", total);  
</script>
</body>
</html>

ANALYSIS

First, we declared a variable number and assigned value 6 and total variable is initialized to 0.
Next, Value inside the number variable will be tested against the while condition.
If the condition results true then number is added to the total, otherwise it will exit from the loop
In the next line we used ++ operator to increment the number value. After incrementing the process will be repeated until the condition results False.

OUTPUT: Here, Our number = 6. It means, total = 6+7+8+9+10 = 40

Infinite JavaScript While Loop

If you forgot to increment or decrement the value inside the while loop then while loop in JavaScript will execute infinite times (also called as infinite loop). For example:

<!DOCTYPE html>
<html>
<head>
    <title> JavaScript While Loop </title>
</head>

<body>
    <h1> JavaScript While Loop </h1>
<script>
    var x = 1;
    while (x < 10)
    {
        document.write("<br\> Value From the While Loop is = " + x);
    }
</script>
</body>
</html>

OUTPUT:

Here x is always 1 and x is always less than 10 so while loop statement will go on execute infinite times. Now, let us add increment operator (x++) inside the while loop to the above example.

<!DOCTYPE html>
<html>
<head>
    <title> JavaScript While Loop </title>
</head>

<body>
    <h1> JavaScript While Loop </h1>
<script>
    var x = 1;
    while (x < 10)
    {
        document.write("<br\> Value From the While Loop is = " + x);
        x++;
    }
</script>
</body>
</html>

Now, when it reaches 10 the condition will fail. Let us see the output

OUTPUT

Thank You for Visiting Our Blog