Loops in JavaScript

Loops: These are the iteration statements used when we want to run single or multiple statements a multiple number of times.

They are of the following 3 types in JavaScript:

•  while loop: It processes a statement a fixed number of times and continiues to iterate until the condition specified by the user becomes false.

Syntax

initialization;
while (condition)
{
    statements;
    increment / decrement;
}

Example

<script type = "text/javascript" >
var target = Number(prompt("Please Enter a number", ""));
var start = 0;
while (start <= target)
{
    document.write(start + "<br/>");
    start += 2;
}
</script>

The preceding code displays all the even numbers until the targeted value that the user entered into the prompt box. The Number operator will type cast the value to a number format.

The following are some points to remember:

• If we do not use increment or decrement in a value, then the loop will continue running infinitely.
• If we want to limit the execution of the loop, the break statement is used. For example:
  

 

<script type = "text/javascript" >
var target = Number(prompt("Please Enter a number", ""));
var start = 0;
while (start <= target)
{
    document.write(start + "<br/>");
    start += 2;
    if (start > 100)
    {
        break;
    }
}
</script>

In the preceding example, the loop will stop when the value of start goes above 100.

• If we want to skip the iteration of the loop at some point, then we use the Continue statement. For example:

 

<script type = "text/javascript" >
var start = 0;
while (start < 10)
{
    start += 1;
    if (start % 2 == 0)
    {
        continue;
    }
    document.write(start + "<br/>");
}
</script>

In the preceding code, the loop will skip all the even values and displays only the odd values until 10.

• do while loop: This loop works the same as a while loop, the only difference is that it checks the condition at the last (bottom). This means that it will execute at least one time and then checks the condition that it is true or false. If the condition is true, it will continue executing and once the condition becomes false, it stops and stops the iteration.
  

Syntax

initialization;
do
{
   statements;
   increment/decrement;
}
while (condition);

Example

<script type = "text/javascript" > do
{
    var target = Number(prompt("Please Enter a number", ""));
    var start = 0;
    while (start <= target)
    {
        document.write(start + "<br/>");
        start += 2;
    }
    do
    {
      userChoice = prompt("Do you want to continue? - Yes / No ", "").toUpperCase();
        if (userChoice != "YES" && userChoice != "NO")
        {
            alert('Please Enter a valid choice.');
        }
    }
    while (userChoice != "YES" && userChoice != "NO");
}
while (userChoice == "YES"); < /script>

The preceding code displays the even numbers as explained above in the while loop. Just we have added is that, now the program asks the user to select whether he/she wants to continue to use the program or exit through it. This is done using a do while loop.

The toUpperCase() method is used to change the case of the text entered by the user. If the user enters some lowercase letters and some upercase letters, then our if condition will not work as expected.

• for loop: It is the most used and the easiest iteration loop. It works the same as the while and do while loop, the only difference is that it takes all the parameters in the same line.
  

Syntax

for (initialization; condition; increment/decrement)
{
   statements;
}

Example

<script type = "text/javascript" >
var target = Number(prompt("Enter a Number:", ""));
for (var start = 0; start <= target; start += 2)
{
    document.write(start + "<br/>");
}
</script>

The preceding code, takes all the values in the same line. So, it is easy to maintain and use.

For any queries, please leave a comment.