Loops

Loops in Javascript

Loop are used to execute give codeblock repetatively & contineously.

There are 3 types of loops are available in JavaScript.

for loop
while loop
do-while loop

for loop

The for loop is the most commonly used loop in JavaScript. It iterates over a block of code a specific number of times.

Syntax :

for (initialization; condition; expression) {
  // code to be executed
}

Here, In the above Syntax

Initialization : It is usually a variable declaration and initialization.

Condition : This is where you specify the condition that must be true for the loop to continue executing. If the condition is false, the loop will terminate.

Expression : This is where you update the value of the loop counter after each iteration.

Example :

for (let i = 0; i < 5; i++) {
  document.write("<br/> Hello Students");
}

Output :

Hello Students
Hello Students
Hello Students
Hello Students
Hello Students

In the above example, let i=0; initializes a variable i with a value of 0. i<5; sets the condition for the loop to continue running, which is that i must be less than 5. i++ increments i by 1 after each iteration of the loop. document.write("<br/> Hello Students"); writes the string "<br/> Hello Students" to the HTML document.

Break and Continue Keyword

break

break keyword is used to immediately terminate a loop and resume execution at the next statement after the loop.

Example :

for (let i = 0; i < 10; i++) {
  if (i == 5) {
    break;
  }
  console.log(i);
}

Output :

0
1
2
3
4

In the above example for loop that starts at 0 and iterates up to 9, with i being the loop counter variable.

During each iteration of the loop, it checks if i is equal to 5 using an if statement. If i is equal to 5, then the break statement is executed, causing the loop to terminate immediately and skip the remaining iterations.

If i is not equal to 5, then the loop continues to execute normally and the console.log(i) statement is executed, which prints the current value of i to the console.

continue

continue is used to skip the current iteration of a loop and move on to the next iteration.

Example :

for (let i = 0; i < 10; i++) {
  if (i % 2 === 0) {
    continue;
  }
  console.log(i);
}

In the above example for loop that starts at 0 and iterates up to 9, with i being the loop counter variable.

During each iteration of the loop, it checks if i is divisible by 2 (i.e., if i % 2 === 0) using an if statement. If i is divisible by 2, then the continue statement is executed, causing the current iteration of the loop to be skipped and moving on to the next iteration.

If i is not divisible by 2, then the loop continues to execute normally and the console.log(i) statement is executed, which prints the current value of i to the console.

while loop and do-while loop

In a while loop, the loop executes as long as the condition is true.

Syntax :

while (condition) {
  // code block to be executed
}

Example :

let i = 0;

while (i < 10) {
  console.log(i);
  i++;
}

In the above example, this loop initializes i to 0 and continues to execute as long as i is less than 10. On each iteration of the loop, the value of i is printed to the console using console.log(), and then i is incremented by 1 using i++.

You can also use a do-while loop, which is similar to a while loop but guarantees that the loop body is executed at least once.

Syntax :

do {
  // statements to be executed inside the loop
} while (condition);

Example :

let i = 0;

do {
  console.log(i);
  i++;
} while (i < 10);

In the above example, this loop initializes i to 0 and executes the loop body at least once. On each iteration of the loop, the value of i is printed to the console using console.log(), and then i is incremented by 1 using i++. The loop continues to execute as long as i is less than 10.

Loops Using Array

const arr = ["A", "B", "C", "D"];

for (let i = 0; i < 4; i++) {
  console.log(arr[i]);
}

Output :

A
B
C
D

Example :

const students = [
  "Gitanjali",
  "Achal",
  "Kunal",
  "Kaveri",
  "Shanzey",
  "Suyash",
  "Vrushali",
];

for (let i = 0; i < 7; i++) {
  console.log(`Hello ${students[i]}`);
}

Output :

Hello Gitanjali
Hello Achal
Hello Kunal
Hello Kaveri
Hello Shanzey
Hello Suyash
Hello Vrushali

In the above example, we initialized an array name of that array is students is declared with a list of student names. Each name is a string element in the array. This is a for loop that starts with i initialized to 0. The loop will continue as long as i is less than 7.

After each iteration, the value of i is incremented by 1. Then prints a greeting message using the console.log() function. In this message we use template string for combine the string "Hello" with the current student's name using the students[i].

Example :

const students = [
  "Gitanjali",
  "Achal",
  "Kunal",
  "Kaveri",
  "Shanzey",
  "Suyash",
  "Vrushali",
];

for (let i = 0; i < students.length; i++) {
  console.log(`Hello ${students[i]}`);
}

Output :

Hello Gitanjali
Hello Achal
Hello Kunal
Hello Kaveri
Hello Shanzey
Hello Suyash
Hello Vrushali

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>Array With Loop</title>
    <style>
      .student-card {
        border: 1px solid black;
        padding: 10px;
        margin: 10px;
        border-radius: 5px;
        background-color: blueviolet;
        color: white;
      }
    </style>
  </head>
  <body>
    <script>
      const students = [
        "Achal",
        "Kunal",
        "Kaveri",
        "Shanzey",
        "Suyash",
        "Vrushali",
        "Swapnali",
        "Yash",
        "Komal",
        "Urmila",
      ];

      for (let i = 0; i < students.length; i++) {
        document.write(
          ` <div class='student-card'>
        Hello ${students[i]}
      </div>`
        );
      }
    </script>
  </body>
</html>

Output :

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>Document</title>
    <style>
      body {
        background-color: bisque;
      }
      .student-card {
        border: 1px solid black;
        padding: 10px;
        margin: 10px;
        border-radius: 5px;
        background-color: blueviolet;
        color: white;
        font-size: 20px;
      }
      .app-title {
        text-align: center;
        color: deepskyblue;
      }
      .list {
        background-color: white;
        padding: 10px;
        border-radius: 15px;
      }
    </style>
  </head>
  <body>
    <h1 class="app-title">Student's List</h1>

    <div class="list" id="list"></div>

    <script>
      const students = ["Achal", "Kunal", "Kaveri", "Shanzey", "Suyash"];

      const listElement = document.getElementById("list");

      for (let i = 0; i < students.length; i++) {
        listElement.innerHTML += `
        <div class='student-card'>
             Hello ${students[i]}
        </div>
       `;
      }
    </script>
  </body>
</html>

Output :

Loops in Javascript​

for loop​

Break and Continue Keyword​

break​

continue​

while loop and do-while loop​

Loops Using Array​

Loops in Javascript

for loop

Break and Continue Keyword

break

continue

while loop and do-while loop

Loops Using Array