Loops in JavaScript

Loops in JavaScript are used to execute a block of code repeatedly as long as a specified condition is true. Instead of writing the same code multiple times, we can use a loop to perform the same task efficiently.

For example, if we want to print numbers from 1 to 5, we could write five console.log() statements. Instead, we can use a loop to do it with less code.

JavaScript provides different types of loops. The commonly used loops are:

• for loop
• while loop
• do...while loop

1. for Loop

The for loop is used when we know how many times we want to execute a block of code.

The syntax is:

for (initialization; condition; increment/decrement) {
    // code to execute
}

The for loop has three main parts:

• Initialization – Executes once at the beginning.
• Condition – Checked before every iteration.
• Increment/Decrement – Updates the value after each iteration.

For example:

for (let i = 1; i <= 5; i++) {
    console.log("Product " + i);
}

Output:

Product 1
Product 2
Product 3
Product 4
Product 5

Here, let i = 1 initializes the variable. The condition i <= 5 is checked before each iteration, and i++ increases the value by 1 after every iteration.

The loop stops when the condition becomes false.

How the for Loop Works

i = 1 → condition true → execute code
i = 2 → condition true → execute code
i = 3 → condition true → execute code
i = 4 → condition true → execute code
i = 5 → condition true → execute code
i = 6 → condition false → stop

2. while Loop

The while loop is used when we want to execute a block of code as long as a condition is true.

The syntax is:

while (condition) {
    // code to execute
}

Unlike the for loop, the while loop mainly contains a condition. We need to initialize and update the variable separately.

For example:

let count = 1;

while (count <= 5) {
    console.log("Attempt " + count);
    count++;
}

Output:

Attempt 1
Attempt 2
Attempt 3
Attempt 4
Attempt 5

Here, the condition count <= 5 is checked before every iteration.

When count becomes 6, the condition becomes false, and the loop stops.

Important Point

If we forget to update the variable inside a while loop, the condition may always remain true, resulting in an infinite loop.

For example:

let count = 1;

while (count <= 5) {
    console.log(count);
}

Here, count is never increased, so the condition always remains true.

3. do...while Loop

The do...while loop is similar to the while loop, but there is one important difference: the code inside the loop executes at least once, even if the condition is false.

The syntax is:

do {
    // code to execute
} while (condition);

For example:

let number = 10;

do {
    console.log("Checking number:", number);
    number++;
} while (number < 5);

Output:

Checking number: 10

Here, the condition number < 5 is already false because 10 is not less than 5. However, the code inside the do block executes once before the condition is checked.

Difference Between while and do...while

Consider the same condition using a while loop:

let number = 10;

while (number < 5) {
    console.log("Checking number:", number);
}

Output:

There is no output because the condition is false before the loop starts.

But with do...while:

let number = 10;

do {
    console.log("Checking number:", number);
} while (number < 5);

Output:

Checking number: 10

This shows the main difference: while checks the condition first, whereas do...while executes the code first and checks the condition afterward.

Comments

[Mark Tony]

Well explained 👏