Javascript While Loop Code Syntax Example

In my previous article i have described javascript for loop. Now in this Javascript While Loop tutorial i am going to describe all about While loop, the another popular loop in javascript language. The execution process is almost same to for loop except initializing the control variable and Increment or decrement of control values within the first bracket of for loop. But in While Loop:

1. You have to initialize the control variable before starting the While Loop
2. You have to increment or decrement the control variable within the While Loop body

To iterate a single statement, just put the statement under While Loop but for multiple statements wrap all statements by curly braces which is termed as loop body. For while loop the body will be executed until the While Loop condition return false. So except few things the purpose of For Loop and While Loop almost same.

Overview of While Loop Execution Process:

javascript_While_loop

Incremental While Loop Code Example:

<script type="text/javascript">
    // This is the incremental While loop
    var i = 0;
    document.write("***** Start While loop *****</br>");
    while (i < 5) {
        document.write("Iteration Number = " + i + "</br>");
        i++; // i++ means i=i+1
    }
    document.write("***** End While loop *****");
</script>

Output:
javascript_While_loop_Incremental

Decremental While Loop Code Example:

<script type="text/javascript">
    // This is the decremental While loop
    var i = 4;
    document.write("***** Start While loop *****</br>");
    while (i >= 0) {
        document.write("Iteration Number = " + i + "</br>");
        i--; // i-- means i=i-1
    }
    document.write("***** End While loop *****");
</script>

Output:
javascript_While_loop_Decremental

Nested While Loop Code Example:

<script type="text/javascript">
    var i = 0;
    document.write("***** Start While loop *****</br>");
    while (i < 3) {
        var j = 0;
        while (j < 3) {
            document.write("Iteration i=" + i + " j=" + j + "</br>");
            j++;
        }
        i++;
    }
    document.write("***** End While loop *****");
</script>

Output:
javascript_nested_While_loop

Note: For Nested “While Loop” the way of execution is, for any single iteration of parent loop the child loop will be iterated full time means the total number of execution for the child loop would be the multiplication of parent loop iteration number and child loop iteration number. In the above example the total number of execution=3 (for i -> 0,1,2)* 3(for j -> 0,1,2)=9. Also please read carefully the i value & j value in each iteration. So now i hope that you can control the execution of nested loop up to any level.

Using break statement in While Loop:

<script type="text/javascript">
    // Using break in While loop
    var i = 0;
    document.write("***** Start While loop *****</br>");
    while (i < 5) {
        document.write("Iteration Number = " + i + "</br>");
        if (i == 3)
            break;
        i++;
    }
    document.write("***** End While loop *****");
</script>

Output:
javascript_While_loop_break

The break is used in loop body to exit instantly from the loop, even though some or all iterations still yet to complete. See the above code example output carefully.

Note: If you use BREAK (in uppercase) instead of break then you will be exited from the full script.

Download Code Example

Leave a Reply

Your email address will not be published. Required fields are marked *

AlphaOmega Captcha Classica  –  Enter Security Code