Javascript For Loop Code Syntax Example

Loops are the most common and complicated part of any programming language. First of all what is loop or iteration? Loop is used for executing a set of statements or instructions repeatedly. To perform the repetitive task, Javascript provides us 3 types of Loop. For Loop is one of them. In this free javascript tutorial i am going to discuss on only For Loop. If we need to run multiple statement within a loop then the statements must be enclosed by curly braces { }. But for a single statement no need to wrap the line within curly braces because, for any iteration/loop if the condition satisfy then by default first line of code will be executed. This statement is also true for other programming languages. Keep in mind two things when you want to write a loop statement:

1. Statements that you need to iterate
2. Termination or exit from loop

In this post i will also want to discuss the following topics:
1. break Statement to exit from a loop
2. Inner loop or Nested loop

How For Loop Structure Works:
javascript for loop structure

Structure Explanation:
To construct a for loop we need a control variable. Assign the value to this variable. Set a condition & increment or decrement the control variable in such a way so that the condition satisfy for number of iterations we want.

Incremental For Loop Code Example:

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

Output:
Javascript_For_Loop_Incremental_output

Decremental For Loop Code Example:

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

Output:
Javascript_For_Loop_decremental_output

Some facts regarding Javascript For Loop:
1. Initialization is optional

<script type="text/javascript">
    document.write("***** Start For loop *****</br>");
    var i = 0;
    for (; i < 5; i++) {
        document.write("Iteration Number = " + i + "</br>");
    }
    document.write("***** End For loop *****");
</script>

2. We can control “control variable” out side the condition

<script type="text/javascript">
    document.write("***** Start For loop *****</br>");
    var i = 0;
    for (; i < 5; ) {
        document.write("Iteration Number = " + i + "</br>");
        i++;
    }
    document.write("***** End For loop *****");
</script>

3. We can use break statement to exit from any place of the loop body

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

Output:
javascript_for_loop_Break

Note: The break statement breaks the loop and continues executing the code after the loop. But if you write BREAK(upper case) instead of break then you will be exited from the program. If we use BREAK for the above code the output will be:

javascript_BREAK

4. We can use nested for loop as we want

<script type="text/javascript">
    document.write("***** Start Nested For loop *****</br>");
    for (i = 0; i < 3; i++)
        for (j = 0; j < 3; j++)
            document.write("Iteration Number>> i=" + i + " j=" + j + " </br>");
    document.write("***** End For loop *****");
</script>

Output:
javascript_nested_for_loop

Note: For Nested “For Loop” the way of execution is for any single iteration of parent loop the child loop will be iterated fully 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.

Download Code Example

Leave a Reply

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

AlphaOmega Captcha Classica  –  Enter Security Code