Show List
Tutorials > JavaScript > Loops in JavaScript

Loops in JavaScript

Loops in JavaScript allow you to repeat a set of statements for a certain number of times or until a specific condition is met. The two main types of loops in JavaScript are for loops and while loops

For Loop

  • In the example below the execution starts when the value of i = 0 and continues till i <= 10 and value of i increments by 1 with each iteration
<!DOCTYPE html>
<html>

<head>
  <script>
    function demo() {
      var output = "";
      for (i = 0; i <= 10; i = i + 1) {
        output += "The sequence is " + i + "<br>";;
      }  

      document.getElementById("result").innerHTML = output;
    }
  </script>
</head>

<body>

  <button type="button" onclick="demo()">Demo</button>
  <p id="result"></p>
</body>

</html> 
Output:
The sequence is 0
The sequence is 1
The sequence is 2
The sequence is 3
The sequence is 4
The sequence is 5
The sequence is 6
The sequence is 7
The sequence is 8
The sequence is 9
The sequence is 10

For in Loop

  • For in loop is used to iterate over the elements of an array or properties of an object
 <!DOCTYPE html>
<html>

<head>
  <script>
    function demo() {
      var output = "";
      const numbers = [32, 43, 54, 65, 77];

      for (let x in numbers) {
        output += numbers[x] + "<br>";
      }

      document.getElementById("result").innerHTML = output;
    }
  </script>
</head>

<body>

  <button type="button" onclick="demo()">Demo</button>
  <p id="result"></p>
</body>

</html>
Output:

32
43
54
65
77

While Loop

  • It loops through the statements till the specified condition is true
  • In the example below the execution will repeat till i <= n
<!DOCTYPE html>
<html>

<head>
  <script>
    function demo() {
      var output = "";


      var i = 1, n = 10;

      // while loop from 1 to 10
      while (i <= n) {
        output += "The sequence is " + i + "<br>";;
        i++;
      }

      document.getElementById("result").innerHTML = output;
    }
  </script>
</head>

<body>

  <button type="button" onclick="demo()">Demo</button>
  <p id="result"></p>
</body>

</html>
Output:
The sequence is 1
The sequence is 2
The sequence is 3
The sequence is 4
The sequence is 5
The sequence is 6
The sequence is 7
The sequence is 8
The sequence is 9
The sequence is 10

Break, Continue and Labels

Break is used to exit from a loop. Continue is used to jump to the next iteration. Label is used to break or continue a specific loop or code block.
<!DOCTYPE html>
<html>

<head>
  <script>
    function demo() {
      var output = "";

      loop1:
      for (j = 1; j < 10; j++) {
        var i = 0, n = 20;
        loop2:
        while (i <= n) {

          i++;

          if (i == 3) {
            continue;
          }

          if (i == 5) {
            break;
          }

          if (j == 3) {
            break loop1;
          }
          output += "The value of j is " + j + " and i is " + i + "<br>";
        }
      }
      document.getElementById("result").innerHTML = output;
    }
  </script>
</head>

<body>

  <button type="button" onclick="demo()">Demo</button>
  <p id="result"></p>
</body>

</html>
Output:
The value of j is 1 and i is 1
The value of j is 1 and i is 2
The value of j is 1 and i is 4
The value of j is 2 and i is 1
The value of j is 2 and i is 2
The value of j is 2 and i is 4


Next: JavaScript Conditional Statements

    Leave a Comment

  • captcha text