Loops in JavaScript

Loops in javascript are used when you have to execute a block of code repeatedly based on condition. Loops execute certain lines of code as long as the condition is true.
If you want to write “Hello world” message 50 times on your webpage, you’ll have to write code 50 times. But with the help of loops, you can do that in 4-5 lines of code.

Types of loops:

  1. for loop
  2. for/in loop
  3. for/of loop
  4. while loop
  5. do/while loop

1) for loop:

Syntax:
for(statement1; statement2; statment3) {
// code to be executed repeatedly
}

Explanation:

  1. statement1 is executed first even before the running loop. Mainly, statement1 is used to assign values to variables that will be useful in the loop.
    Example: var i = 1;
  2. statement2 is used to give a condition on which the loop should run.
    Example: i <= 5;
  3. statment3 is executed every time the code block is executed. This statement is used to increment the value of the variable.
    Example: i++;

Example of for loop:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>For Loop in JS</title>
    <script>
      document.write("<b><u>For loop in javascript:</u></b><br /><br />")
      for (var i = 1; i <= 5; i++) {
        document.write("Hello world!!!");
        document.write("<br>");
      }
    </script>
  </head>
  <body>
  </body>
</html>

Output:

For loop in javascript:
Hello world!!!
Hello world!!!
Hello world!!!
Hello world!!!
Hello world!!!

2) for/in loop:

for/in loop is used to loop on an object.

Example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>For/in loop in JS</title>
    <script>
      var developer = { name: "John Doe", job: "UI developer", age: 23 };
      document.write("Developer name, job profile and age is:");
      document.write("<br />");
      for (var x in developer) {
        document.write(developer[x] + " ");
      }
    </script>
  </head>
  <body>
  </body>
</html>

Output:

Developer name, job profile and age is:
John Doe UI developer 23

3) for/of loop:

You can use for/of loop for iterating(loop through) arrays, objects, strings, and more.

Example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>for/of loop in JS</title>
    <script>
      var names = ['Bill', "Steve", "Tim", "Mark"]
      for (var x of names) {
        document.write(x);
        document.write("<br />");
      }
    </script>
  </head>
  <body>
  </body>
</html>

Output:

Bill
Steve
Tim
Mark

4) while loop:

The while loop iterates through a block of code when the condition is true.

Syntax:
while(condition) {
// code to be executed repeatedly
}

Example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>while loop in JS</title>
    <script>
      var id = 1;
      while (id <= 5) {
        document.write("Employee id is: ", id);
        document.write("<br />");
        id++;
      }
    </script>
  </head>
  <body>
  </body>
</html>

Output:

Employee id is: 1
Employee id is: 2
Employee id is: 3
Employee id is: 4
Employee id is: 5

5) do/while loop:

The do/while loop is alternative of while loop. But in do/while loop code is executed once. After that, it checks the condition and repeats the loop until the condition is true.

Syntax:
do {
// code to be executed
} while(condition)

Example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>do/while loop in JS</title>
    <script>
      var id = 1;
      do {
        document.write("Employee id is: ", id);
        document.write("<br />");
        id++;
      } while (id < 1)
    </script>
  </head>
  <body>
  </body>
</html>

Output:

Employee id is: 1

Notice that in this example code block is executed once even if the condition is false.

Additional Links:

String methods and properties

Loops in javascript

Arrays in JavaScript

Objects in JavaScript

Leave a Reply

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