Tutorial Gateway

JavaScript While Loop

by

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

JavaScript While Loop Syntax

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

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

First, the compiler checks the condition inside the While loop. If the condition is True, the statement or group of statements under the while loop block executed. If it is False, the compiler will come out of the while loop and execute other statements outside the while loop.

TIP: For a single statement in the While loop, curly braces not required. However, if we omit them for multiple statements, it will execute the first statement only. Always use braces.

JavaScript While Loop Flow Chart

The flow chart of While loop in Javascript is as shown below:

JavaScript While Loop Flow Chart

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

  1. If the While condition is True, it executes the code inside the while loop.
  2. Next, we have to use Increment & Decrement Operator inside the while loop to Increment the value
  3. Again it will check the while condition after the value incremented. As long as the condition is True, the code inside the while loop executed.
  4. If it is False, 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 number variable and assigned value 6. By using it, the compiler will add those values up to 10.

<!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

  1. In this JavaScript while Loop example, First, the value inside the number variable (6) is tested against the while condition.
  2. If the condition results true, the number added to the total. Otherwise, it will exit from the loop
  3. In the next line, we used ++ operator to increment the number value. After incrementing, the process repeated until the condition results False.

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

JavaScript While Loop 1

Infinite JavaScript While Loop

If you forgot to increment or decrement the value inside the while loop, then it 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:

JavaScript While Loop 2

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

JavaScript While Loop 3