JavaScript Loops | Learn JS Loops

JavaScript Loops | Learn JS Loops

In this javascript loops tutorial, you will learn following:

  • What are Loops in JavaScript?
  • Different Types of Loops in JavaScript
    • while loop
    • do-while loop
    • for loop
    • for-of loop
    • for-in loop

What are Loops in JavaScript?

In many programming languages, loops are used to the execution of a block of code repeatedly until the specified condition is met true.

For example, suppose you want to print “My First Program” 5 times. This can be done in two ways, the first one is iterating a loop and the second one is printing manually.

Using a loop print “My First Program”

 <script>
    for(var i=1; i<=5; i++) {
        document.write( "My first Program - " + i + "<br>");
    }
 </script>

Print “My First Program” Manually

  <script>
    document.write( "My first Program" + "<br>");
    document.write( "My first Program" + "<br>");
    document.write( "My first Program" + "<br>");
    document.write( "My first Program" + "<br>");
    document.write( "My first Program" + "<br>");
  </script>

You looked at both the examples given. How did we print my first program in JavaScript 5 times?. But in one we had to write the code repeatedly in a program. That is when we used for loop, then we write less code to print 5 times “my first program”.

By the end of this tutorial, you will learn about all the loops of JavaScript.

Different Types of Loops in JavaScript

There are five types of loops in JavaScript:

  • while loop
  • do-while loop
  • for loop
  • for-of loop
  • for-in loop

1: while Loop

The   while   loop is also known as an entry control loop. while loop is repeated block of code until specified condition met is true. If the condition fails, the loop execution halt.

Syntax of while loop:

 while(condition) {
    // Code to be executed
}

The “while loop” is executed block of code until the specified condition is met true. Inside the while loop, you should include the statement that will end the loop at some point in time. Otherwise, your loop will never end or run infinitely.

Example 1: while loop
<script> 

var i = 25;  

while (i<=20)  {  
  
  document.write(i + "<br/>");  
  i++; 

}  

</script>  

2: do while Loop

The  do while   loop is different from while loop. In the do-while loop, the specified condition is evaluated at the end of the loop. Even if the condition is false, the do-while loop will execute the block of code once.

Note:- Do while loop is also known as an exit control loop.

Syntax of do while loop:

do {
    // Code to be executed
}
while(condition); 

The do…while loop is very similar to while loop. The main difference is that in do…while loop, if the condition is false, the do-while loop will execute the block of code once.

Example 1: do-while loop
  <script>
    var i = 1;
    do {
        document.write(i + "<br/>"); 
        i++;
    }
    while(i <= 0);
  </script>

3: For Loop

The for loop, the specified condition is evaluated at the beginning of the loop. Even a repeated block of code until the specified condition is met true.

Syntax of while loop:

 for(initializationconditionincrement/decrement) {
    // Code to be executed
} 

Here,

  • Initialization: Initialize a counter variable to start with.
  • Condition: specify a condition that must evaluate to true for next iteration.
  • Iteration: increase or decrease counter.
Example 1: For loop
  <script>
    for(var i=1; i<=5; i++) {
        document.write( i + "<br>");
    }
  </script>

4: for-of Loop

The for/of loop through the values of an iterable object in javascript.

Syntax of for-of loop:

for(variable in object) {
    // Code to be executed
} 
Example 1: for-of loop
  <script>    
    // asign string to var
    let str = "My Class!";
    
    for(let character of str) {
        document.write(character + "<br>");
    }
  </script>

5: The for-in Loop

The for-in loop is a special type of a loop that iterates over the properties of an object, or the elements of an array.

Syntax of for-in loop:

for(variable in object) {
    // Code to be executed
} 
Example 1: for-in loop
  <script>
    // javascript object
    var info = {"fname": "Tony", "lname": "Hill", "age": "25"};
     
    // iterate object using for-in Loop
    for(var pinfo in info) {  
        document.write("<p>" + pinfo + " = " + info[pinfo] + "</p>"); 
    }
  </script>

Conclusion

In this javascript tutorial, you have learned javascript loop such as fordo-while, while,  for-in, and for-of, loop.

AuthorTuts Make

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Javascript, JQuery, Laravel, Livewire, Codeigniter, Vue JS, Angular JS, React Js, WordPress, and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

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