JavaScript While Loop 2

JavaScript While Loop

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 JS While loop starts with the condition. If the condition is True, statements inside it will execute. If it is false, it won’t run at least once. It means while loop may execute zero or more times.

JavaScript While Loop Syntax

The syntax of the While loop is as follows:

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

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

For a single statement in the While loop, curly braces are 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 the While loop is as shown below:

Flow Chart

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

  1. If the condition is True, it executes the code inside it.
  2. Next, we have to use Increment & Decrement Operator inside it to Increment the value.
  3. Again it will check the expression after the value is incremented. The code inside the while loop is executed as long as the condition is True.
  4. If it is False, it will exit from it.

Let us see the While loop example for a better understanding

JavaScript While Loop Example

We declared a number variable in this program and assigned the value 6. By using it, the compiler will add those values up to 10.

<!DOCTYPE html>
<html>
<head>
    <title> Example </title>
</head>

<body>
    <h1> Example </h1>
<script>
    var number = 6, total=0;
    while (number <= 10)
    {
        total = total + number;
        number++;
    }
    document.write("Total = ", total);  
</script>
</body>
</html>

ANALYSIS

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

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

Example

Total = 40

Infinite JavaScript While Loop

If you forget to increment or decrement the value inside the while loop, then it will execute infinite times (also called an infinite). For example:

<!DOCTYPE html>
<html>
<head>
    <title> JavaScriptWhileLoop </title>
</head>

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

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

<!DOCTYPE html>
<html>
<head>
    <title> Sample </title>
</head>

<body>
    <h1> Example </h1>
<script>
    var x = 1;
    while (x < 10)
    {
        document.write("<br\> Value = " + x);
        x++;
    }
</script>
</body>
</html>

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

Example

Value = 1
Value = 2
Value = 3
Value = 4
Value = 5
Value = 6
Value = 7
Value = 8
Value = 9