Loops (while, do-while, and for loops ) in JavaScript in-depth

What are loops in JavaScript?

In JavaScript, loops are control flow structures that allow you to repeatedly execute a block of code as long as a certain condition is true.

Let's see a basic example of why we need a loop.

// Suppose you have to print a counting from 1 to 10
// So, You have to console it 10 times like
console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);
console.log(6);
console.log(7);
console.log(8);
console.log(9);
console.log(10);
Output: 
1
2
3
4
5
6
7
8
9
10

Let's complete this task with the help of loops.

There are the following types of loops in JavaScript: Let's discuss them one by one.

1. While Loop

In JavaScript, awhile loop is a control flow statement that allows you to repeatedly execute a block of code as long as a specified condition is evaluatedtrue.

For Example:

let counting = 1; // Initialize the value
while (counting <= 10) {   // Check condition here
  console.log(counting); // Printing the counting variable
  counting++; // Increment the counting variable
}
Output: 
1
2
3
4
5
6
7
8
9
10

It's crucial to ensure that the condition of the while loop will eventually become false to avoid an infinite loop. If the condition never becomes false, the loop will continue to execute indefinitely, which could lead to performance issues or even crash the program.

For Example:

//  Infinite loop!
while (true) {
    console.log("This is an infinite loop!");
  }

In the above example, the condition true is always true, so the loop will never terminate. Always avoid unintentional infinite loops in your code.

2. Do-While Loop

The do-while loop in JavaScript is a control flow statement that repeatedly executes a block of code as long as a specified condition is true. The key difference between a do-while loop and a while loop is that the do-while loop guarantees that the block of code is executed at least once, regardless of whether the condition is true or false.

For Example:

let counting = 1; // Initialize the value
do {
  console.log(counting); // It print the counting variable one time here.
  counting++; // Increment the counting variable
} while (counting <= 10); // Check condition here
Output: 
1
2
3
4
5
6
7
8
9
10

This ensures that the code inside the do block is executed at least once before the condition is checked.

3. For Loop

In JavaScript, the for loop is a control flow statement that allows you to repeatedly execute a block of code as long as a condition is true. This is used mostly instead of while and do-while loop.

For Example:

for (let i = 0; i <= 5; i++) {
    console.log(i); // Printing
}
// i = 0;  Initialization
// i <= 5;  Checking Condition
// i++;  Incriment
Output: 
0
1
2
3
4
5

Let's see for loop in the case of arrays.

let arr = ["Mr", "Mr1", "Mr2", "Mr3", "Mr4", "Mr5"];
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}
Output:
Mr
Mr1
Mr2
Mr3
Mr4
Mr5

Printing tables in for loop.

// Table of 2. 
let num = 2; // Table of the number you want to print.

        for (let i = 1; i <= 10; i++) {
            console.log(`${num} x ${i} = ${i*num}`);
        }
Output:
2 x 1 = 2
2 x 2 = 4
2 x 3 = 6
2 x 4 = 8
2 x 5 = 10
2 x 6 = 12
2 x 7 = 14
2 x 8 = 16
2 x 9 = 18
2 x 10 = 20

Break & Continue statements in JavaScript

Break:

In JavaScript, the break statement is used to terminate the execution of a loop before the usual time. When the break statement is encountered within a loop, the loop is immediately terminated.

For Example:

    for (let i = 0; i <= 8; i++) {
        if (i == 4) {
            console.log('You have reached at 4');
            break; // After 4 the loop is terminated or stopped
        }
        console.log(i);
    }

Output:
0
1
2
3
You have reached at 4

Continue:

In JavaScript, the continue statement is used inside loops (such as for loops) to skip the rest of the code inside the loop for the current iteration and move on to the next iteration.

For Example:

// If you want to skip number 4 and move to the next then
for (let i = 0; i <= 8; i++) {
    if (i == 4) {
        console.log('You have reached at 4, So it is skipped.');
        continue; // Here it skip number 4 and move to the next iteration
    }
    console.log(i);
}
Output:
0
1
2
3
You have reached here, So it is skipped.
5
6
7
8