Skip to content
Related Articles

Related Articles

Loops in JavaScript

View Discussion
Improve Article
Save Article
Like Article
  • Difficulty Level : Easy
  • Last Updated : 22 Jun, 2022

Looping in programming languages is a feature which facilitates the execution of a set of instructions/functions repeatedly while some condition evaluates to true. For example, suppose we want to print “Hello World” 10 times. This can be done in two ways as shown below:

Iterative Method

The iterative method to do this is to write the document.write() statement 10 times. 

JavaScript




<script type = "text/javascript">
document.write("Hello World\n");
document.write("Hello World\n");
document.write("Hello World\n");
document.write("Hello World\n");
document.write("Hello World\n");
document.write("Hello World\n");
document.write("Hello World\n");
document.write("Hello World\n");
document.write("Hello World\n");
document.write("Hello World\n");
</script>

Using Loops

In Loop, the statement needs to be written only once and the loop will be executed 10 times as shown below: 

JavaScript




<script type = "text/javascript">
var i;
 
for (i = 0; i < 10; i++)
{
    document.write("Hello World!\n");
}
</script>

Many things may seem confusing to you in the above program at this point of time but do not worry you will be able to understand everything about loops in JavaScript by the end of this tutorial. You can observe that in the above program using loops we have used the document.write statement only once but still, the output of the program will be the same as that of the iterative program where we have used the document.write statement 10 times. In computer programming, a loop is a sequence of instructions that is repeated until a certain condition is reached.

  • An operation is done, such as getting an item of data and changing it, and then some condition is checked such as whether a counter has reached a prescribed number.
  • Counter not Reached: If the counter has not reached the desired number, the next instruction in the sequence returns to the first instruction in the sequence and repeats it.
  • Counter reached: If the condition has been reached, the next instruction “falls through” to the next sequential instruction or branches outside the loop.

There are mainly two types of loops:

  1. Entry Controlled loops: In these types of loops, the test condition is tested before entering the loop body. For Loops and While Loops are entry-controlled loops.
  2. Exit Controlled loops: In these types of loops the test condition is tested or evaluated at the end of the loop body. Therefore, the loop body will execute at least once, irrespective of whether the test condition is true or false. The do-while loop is exit controlled loop.

JavaScript mainly provides three ways for executing the loops. While all the ways provide similar basic functionality, they differ in their syntax and condition checking time. Let us learn about each one of these in detail.

  1. while loop: A while loop is a control flow statement that allows code to be executed repeatedly based on a given Boolean condition. The while loop can be thought of as a repeating if statement. Syntax :
while (boolean condition)
{
   loop statements...
}
  1. Flowchart: while loop
    • While loop starts with checking the condition. If it is evaluated to be true, then the loop body statements are executed otherwise first statement following the loop is executed. For this reason, it is also called the Entry control loop
    • Once the condition is evaluated to be true, the statements in the loop body are executed. Normally the statements contain an update value for the variable being processed for the next iteration.
    • When the condition becomes false, the loop terminates which marks the end of its life cycle.
  2. for loop: for loop provides a concise way of writing the loop structure. Unlike a while loop, a for statement consumes the initialization, condition, and increment/decrement in one line thereby providing a shorter, easy-to-debug structure of looping. Syntax:
for (initialization condition; testing condition; 
                              increment/decrement)
{
    statement(s)
}
  1. Flowchart: for-loop-in-java
    1. Initialization condition: Here, we initialize the variable in use. It marks the start of a for loop. An already declared variable can be used or a variable can be declared, local to loop only.
    2. Testing Condition: It is used for testing the exit condition for a loop. It must return a boolean value. It is also an Entry Control Loop as the condition is checked prior to the execution of the loop statements.
    3. Statement execution: Once the condition is evaluated to be true, the statements in the loop body are executed.
    4. Increment/ Decrement: It is used for updating the variable for the next iteration.
    5. Loop termination: When the condition becomes false, the loop terminates marking the end of its life cycle.
  2. do-while: do-while loop is similar to the while loop with the only difference that it checks for the condition after executing the statements, and therefore is an example of an Exit Control Loop. Syntax:
do
{
    statements..
}
while (condition);
  1. Flowchart: do-while
    1. The do-while loop starts with the execution of the statement(s). There is no checking of any condition for the first time.
    2. After the execution of the statements, and update of the variable value, the condition is checked for a true or false value. If it is evaluated to be true, the next iteration of the loop starts.
    3. When the condition becomes false, the loop terminates which marks the end of its life cycle.
    4. It is important to note that the do-while loop will execute its statements at least once before any condition is checked, and therefore is an example of the exit control loop.

Infinite loop

One of the most common mistakes while implementing any sort of looping is that it may not ever exit, that is the loop runs for infinite times. This happens when the condition fails for some reason. Examples: 

JavaScript




<script type = "text/javaScript">
// JavaScript program to illustrate infinite loop
 
    // infinite loop because condition is not apt
    // condition should have been i>0.
    for (var i = 5; i != 0; i -= 2)
    {
        document.write(i);
    }
     
    var x = 5;
 
    // infinite loop because update statement
    // is not provided.
    while (x == 5)
    {
        document.write("In the loop");
    }
 
</script>


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!