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 a “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 an alternative to the 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

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments