Loops in Javascript

Introduction

Have you ever found it tiresome to do the same set of things for a desired number of times?. Life would have been a lot easier if we had an option to loop over items. Thankfully there is a way to achieve this in coding, and that’s loops!. Javascript has many types of loops, and we are going to look into each of them in this blog.

You may get overwhelmed by the many different types of loops that Javascript offers, like for loop, while loop, do...while loop, for...in loop, for...of loop etc. But deep down, they do the same thing. They repeat an action some number of times. You can set the number of times you want the actions to repeat.

Entry controlled and exit controlled loops

In the entry controlled loop, the test condition is tested before entering the loop. This works only if the test condition is true. For loop and while loop come under this category. The test condition is tested or evaluated at the end of the loop body in an exit controlled loop. These loops are executed at least once, irrespective of whether the test condition is true or false. Do while loop comes under this category.

Do not be worried about what for loops, while loops etc., are now. They are discussed below.

What are loops?

We have already looked at some simplified meanings of loops. To put it formally, a loop is a sequence of instructions that can be made to continually repeat until a specific condition is met. Here we determine how many times we want it to repeat and the condition at which we want it to end.

Flowchart representation of loops

Types of loops in Javascript

For statement

The for loop in Javascript is similar to the for loop in many other programming languages like the C programming language, Java etc. The for loop repeats a set of code until the condition that controls the evaluates the loop fails or becomes false. For loop is an entry-controlled loop.

Syntax

for (statement 1; statement 2; statement 3) {
// Code goes here.
}

Here statement 1 can be called the initialization part. Statement 2 is the condition, and statement 3 is the update. The code that needs to be executed is put in the body of the loop.

JS code demonstrating for-loop

<!DOCTYPE html>
<html>
  <body>
      <script>
        let condition_value = 5;
        
        for(let i=0; i<condition_value; i++){
         document.write(i + "<br>"); //<br> is a line break element in HTML
        }
        /*
        Here the for loop starts from the value i=0 and runs until a condition. The condition is that the loop can run as long as the value of variable 'i' is less than the value of the variable condition_value. In each iteration, it prints out the value of variable 'i'. 
        */
      </script>
  </body>
</html>

Output:

do...while loop

This loop is similar to the for-loop. Do...while loop repeats a set of code until a specific condition is evaluated to false. The do-while loop is called an exit controlled loop. One important point to note in a do...while loop is that it is executed at least once before checking the condition.

Syntax

do {
  code block to be executed
}
while (condition);

JS code demonstrating do...while loop

<!DOCTYPE html>
<html>
  <body>
      <script>
        let condition_value = 5;
        let i=0;
        
        do {
          document.write(i + "<br>");
          i += 1;
        } while (i < condition_value); 
        
        /*
        In the do...while loop, the update of the variable value is made inside the parenthesis. The condition is that the loop can run as long as the i value is less than the value of the variable condition_value. In each iteration, it prints out the value of i. 
        */
      </script>
  </body>
</html>

Output

While loop

Contrary to the do-while loop, the while loop is called an entry controlled loop. Any loop where the condition is checked before executing the loop body is called an entry-controlled loop. In an exit-controlled loop, first, the loop’s body is executed, and checking of the condition is done at last.

Syntax

while (condition) {
  // code block to be executed
}

JS code demonstrating while loop

<!DOCTYPE html>
<html>
  <body>
      <script>
        let n = 0;
        let x = 0;
        
        while (n < 3) {
          n++;
          document.write(n+"<br>");
        }
        
      </script>
  </body>
</html>

Output

For...in loop

The for...in loop in Javascript is used to loop through the properties of an object.

Syntax

for (key in object) {
  // code block to be executed
}

The following JS code will demonstrate the use for...in to loop over the properties of an object.

<!DOCTYPE html>
<!DOCTYPE html>
<html>
  <body>
      <script>
        /*
        Here rectangle is an object. Objects are also like variables in Javascript. They can contain many values. The values of an object are written in name:value pairs. The name and value are separated by using the colon.
        */
        const rectangle = {length:25, width:5, color:"Red"}; 
        
        let txt = "";
        
        for (let x in rectangle) {
          txt += rectangle[x] + " ";
        }
        //Using the for-in loop, we can loop over the rectangle objects values.
        document.write(txt);
        
      </script>
  </body>
</html>

Output

25 5 Red

The following JS code will demonstrate the use for...in to loop over the properties of an array.

<!DOCTYPE html>
<html>
  <body>
      <script>
        //fruitBasket is an array with its array values as name of some fruits
        const fruitBasket = ["Apple", "Orange", "Grape", "Mango"]; 
        
        let fruit;
        
        for (fruit in fruitBasket) {
          document.write(fruitBasket[fruit]+" ");
        }
        
      </script>
  </body>
</html>

Output

Apple Orange Grape Mango

for...of loop

We can use the javascript for-of loop to loop through the values of an iterable object in Javascript. Objects that we can iterate over with for..of loop are called iterable. To be more specific, iterables must implement the Symbol.iterator method to qualify as an iterable.

Syntax

for (variable of iterable) {
  // code block to be executed
}

JS code demonstrating for...of loop

<!DOCTYPE html>
<html>
  <body>
      <script>
        let flower = "Jasmine";
        let text = "";
        
        for (let x of flower) {
          text = text + x;
          // Concatenation of the letters in variable flower to the variable text using the for...of loop
        }
        
        document.write(text);
        
      </script>
  </body>
</html>

Output

Jasmine

Break statement

The break statement is used to jump out of a loop or take the control flow outside the loop.

Break statement flowchart

Example code to demonstrate the working of break statement in JS.

<!DOCTYPE html>
<html>
  <body>
      <script>
        for (let i = 0; i < 10; i++) {
        
          if (i === 3){ 
           break; 
          }
          document.write(i+" ");
        }
        
        /*
        values of i from 0 to 2 are printed. The condition for the break is that when the i value becomes equal to 3, the control goes outside the loop.
        */
      </script>
  </body>
</html>

Output

0 1 2

Continue statement

The continue statement works similarly to the break statement. Its function is to take the program control to the beginning of the loop.

Flowchart of continue statement

Example code to demonstrate the working of continue statement in JS

<!DOCTYPE html>
<html>
  <body>
      <script>
        for (let i = 0; i < 10; i++) {
          
          if (i === 3){ 
           continue; 
          }
          document.write(i+" ");
        }
        
        //values of i from 0 to 3 are printed. The condition for the continue statement is such that when the i value becomes equal to 3. At this time, the iteration is skipped for that particular value, and the loop continues with the next iteration.
        
      </script>
  </body>
</html>

Output

0 1 2 4 5 6 7 8 9

Frequently Asked Questions

1.How many types of loops are present in Javascript?

There are 5 different types of loops in Javascript. They are for loop, do-while loop, while loop, for in loop, for-of loop.

2.How do loops work in javascript?

The loops in javascript works similar to loops in any other programming language. It executes a block of code as long as the specified condition is true. We can set the condition and how many times the loops can execute.

3. What are iterables in javascript?

Objects that we can iterate over with for..of loop are called iterable. To be more specific, iterables must implement the Symbol.iterator method to qualify as an iterable.

Key Takeaways

Loops in javascript offer a way to do repetitive tasks with ease. There are different types of loops in javascript. The loops available in Javascript are for loop, do...while loop, for...in loop and for...of loop. Using these loops can simplify a lot of work that has repetitive nature. The break statement is used to jump out of a loop or take the control flow outside the loop. The continue statement works similarly to the break statement. Its function is to take the program control to the beginning of the loop.

Excited about Javascript?. Take this Javascript Course from Coding Ninjas and start learning!.