JavaScript Loops | Learn JS Loops

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

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(_initialization_; _condition_; _increment_/_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.

Suggest:

Top 4 Programming Languages to Learn In 2019

Top 4 Programming Languages to Learn in 2019 to Get a Job

Dart Programming Tutorial - Full Course

Introduction to Functional Programming in Python

There Is No Best Programming Language

Python Django Tutorial 2018 for Beginners