JavaScript Iterative Structures – Part I

In this JavaScript tutorial, you will learn about JavaScript Iterative Structures, for loop, for..in statement, break and continue explained along with syntax and examples.

Iterative Structures are used to execute a certain piece of code a specified number of times or until the condition mentioned remains true. The Iterative structures are also termed “looping” in programming terminology. Iterative Structure is an important part of programming terminology. When a programmer wants to repeat the same code a number of times, he or she does not have to rewrite the code again and again, resulting in poor code performance. Instead, the programmer can use looping statements to repeat a block of code until the condition specified is true or repeated a specified number of times.

Looping can be achieved in JavaScript using various statements:

for loop
while loop
do..while loop
for..in loop

for loop:

This is used when a programmer knows for certain the number of times a block of code should be executed.

The general syntax of the for loop structure of a JavaScript is as follows:

for (variable=starting_value; variable relational_operator condition;var=var_incrment/decrement)
{
   Block of Code to be executed
   ……………
   ……………
}

An Example of for loop of JavaScript

<html>
   <body>
      <script type="text/javascript">
        var exfor=1
        for (exfor=1;exfor<=15;exfor++)
        {
           document.write("Value is: " + exfor)
           document.write("<br />")
        }
      </script>
   </body>
</html>

The output of the above example is

Value is: 1
Value is: 2
Value is: 3
Value is: 4
Value is: 5
Value is: 6
Value is: 7
Value is: 8
Value is: 9
Value is: 10
Value is: 11
Value is: 12
Value is: 13
Value is: 14
Value is: 15

In the above example, the variable exfor is initialized with a starting value of 1 and the loop executes with this value (as the value is less than 15) and by the statement document.write , the output is written with the current value of variable exfor (which is 1). Then line break is given which gives a new line. Then again control passes to the for loop and the value of exfor is incremented by 1 (by the command exfor++) . This gives the value of exfor as 2 and this is checked with the condition in for statement. Since 2 is less than 15 again, for loop executes and the value of variable exfor prints, continuing until the variable exfor reaches the value 15. Then the value increments to 16, which is greater than 15, taking control out of for loop.

for..in statement:

for..in statement will be explained after the concept of arrays is discussed in the next chapter.

There may be situation when programmers want to come out of the loop explicitly or want to break the current loop and continue with the next value. To handle these situations, JavaScript uses two commands:

Break
Continue

Break:

The break command is used for breaking the loop and continuing with the execution of the code that follows after the loop.

The general structure of this command is

break

for example:

<html>
   <body>
      <script type="text/javascript">
        var exfor=1
        for (exfor=1;exfor<=15;exfor++)
        {
           if (exfor==4){break}
           document.write("Value is: " + exfor)
           document.write("<br />")
        }
      </script>
   </body>
</html>

The output of the above program is

Value is: 1
Value is: 2
Value is: 3

In the above program, the initial value of the variable exfor is 1. Inside the for loop the if condition checks to see if the value of variable reaches the value 4. Until the value of the variable exfor reaches 4, the for loop executes and, as a result, the values 1,2,3 print. When the value of exfor reaches 4, the break statement executes and, as a result, the control moves or breaks out of the for loop.

Continue:

The command continue is used for breaking the current loop and proceeding with the next value.

The general structure of this command is:

continue

<html>
   <body>
      <script type="text/javascript">
        var exfor=1
        for (exfor=1;exfor<=15;exfor++)
        {
           if (exfor==4){continue}
           document.write("Value is: " + exfor)
           document.write("<br />")
        }
      </script>
   </body>
</html>

The output of the above program is

Value is: 1
Value is: 2
Value is: 3
Value is: 5
Value is: 6
Value is: 7

In the above program, the initial value of the variable exfor is 1. Inside the for loop, the if condition checks to see if the value of variable reaches the value 4. Until the value of the variable exfor reaches 4 the for loop executes and, as a result, the value 1,2,3 prints. When the value of exfor reaches 4, the continue statement executes and, as a result, the current value 4 is skipped and the loop proceeds to the next value of the variable (5) and proceeds as before.

Author Description

Editorial Team at Exforsys is a team of IT Consulting and Training team led by Chandra Vennapoosa.

JavaScript Iterative Structures – Part I