JavaScript Loops

Imagine you want to print "Hello" 100 times.

Writing this:

console.log("Hello");
console.log("Hello");
console.log("Hello");
// ... 97 more times

would obviously be a terrible idea.

Instead, we can tell JavaScript:

"Repeat this code until a certain condition is met."

This is exactly what loops are used for.

What is a Loop?

A loop is a programming structure that repeatedly executes a block of code as long as a specified condition is satisfied.

For example:

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

Output:

Hello
Hello
Hello
Hello
Hello

Instead of writing console.log() five times, we wrote it once and let the loop handle the repetition.

Types of Loops in JavaScript

JavaScript provides several ways to create loops:

Let's understand them one by one.

1. for Loop

The for loop is probably the most commonly used loop.

Syntax

for (initialization; condition; update) {
    // code to repeat
}

For example:

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

Output:

1
2
3
4
5

Let's understand what's happening:

let i = 1

This creates the counter and starts it at 1.

i <= 5

This is the condition. The loop continues while it is true.

i++

After every iteration, i increases by 1.

So the loop works like this:

i = 1 → print 1
i = 2 → print 2
i = 3 → print 3
i = 4 → print 4
i = 5 → print 5
i = 6 → condition is false → stop

2. while Loop

A while loop repeats code as long as its condition is true.

Syntax

while (condition) {
    // code to repeat
}

Example:

let i = 1;

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

Output:

1
2
3
4
5

Here, the condition is checked before every iteration.

That's why we need to update i:

i++;

If we forget to update it, the condition may never become false, creating an infinite loop.

3. do...while Loop

The do...while loop is similar to while, but there's one important difference:

The code inside the loop executes at least once, even if the condition is false initially.

Syntax

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

Example:

let i = 1;

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

Output:

1
2
3
4
5

Now consider this:

let i = 10;

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

Even though i < 5 is false, the output is:

10

That's because the do block runs before JavaScript checks the condition.

4. for...of Loop

The for...of loop is useful when we want to go through the values of an iterable, such as an array or string.

For example:

let fruits = ["Apple", "Banana", "Mango"];

for (let fruit of fruits) {
    console.log(fruit);
}

Output:

Apple
Banana
Mango

It's much cleaner than manually accessing each array element.

It also works with strings:

let word = "Hello";

for (let character of word) {
    console.log(character);
}

Output:

H
e
l
l
o

We'll use for...of frequently when learning arrays.

5. for...in Loop

The for...in loop is mainly used to iterate over the property names (keys) of an object.

For example:

let student = {
    name: "John",
    age: 20,
    city: "Delhi"
};

for (let key in student) {
    console.log(key);
}

Output:

name
age
city

We can also use the key to access the corresponding value:

for (let key in student) {
    console.log(key, student[key]);
}

Output:

name John
age 20
city Delhi

A simple rule to remember:

for...of → Values
for...in → Property names/keys

For arrays, for...of is generally the clearer choice when you want the values.

break Statement

Sometimes we want to stop a loop immediately, even if its condition is still true.

For this, we use break.

for (let i = 1; i <= 10; i++) {
    if (i === 5) {
        break;
    }

    console.log(i);
}

Output:

1
2
3
4

When i becomes 5, break stops the entire loop.

continue Statement

Sometimes we don't want to stop the entire loop—we just want to skip the current iteration.

That's what continue does.

for (let i = 1; i <= 5; i++) {
    if (i === 3) {
        continue;
    }

    console.log(i);
}

Output:

1
2
4
5

When i is 3, JavaScript skips that iteration and continues with the next one.

So:

break    → Stop the loop
continue → Skip the current iteration

Nested Loops

A loop can also be placed inside another loop. This is called a nested loop.

For example:

for (let i = 1; i <= 3; i++) {
    for (let j = 1; j <= 2; j++) {
        console.log(i, j);
    }
}

Output:

1 1
1 2
2 1
2 2
3 1
3 2

Nested loops are useful for working with things like tables, grids, and multidimensional arrays.

However, too many nested loops can make code harder to understand and can also affect performance.

Infinite Loops

An infinite loop is a loop that never stops because its condition always remains true.

For example:

while (true) {
    console.log("Hello");
}

This loop will continue forever unless something stops it.

Another common mistake is forgetting to update the counter:

let i = 1;

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

Here, i always remains 1, so i <= 5 is always true.

Always make sure that your loop has a way to eventually become false.

Which Loop Should You Use?

A simple way to choose:

Practical Example

Let's say we want to calculate the total of numbers from 1 to 5:

let total = 0;

for (let i = 1; i <= 5; i++) {
    total = total + i;
}

console.log(total);

Output:

15

The loop calculates:

1 + 2 + 3 + 4 + 5 = 15

This is where loops become really useful—they allow us to perform repetitive calculations without repeating the same code manually.

Conclusion

Loops allow us to repeat code efficiently. Instead of writing the same statements again and again, we can let JavaScript repeat them for us.

The main loops you'll use are:

for
while
do...while
for...of
for...in

And remember these two useful statements:

break    → Completely stop the loop
continue → Skip the current iteration

Once loops are clear, you're ready to move on to one of the most important building blocks of JavaScript: Functions, which let us organize reusable pieces of code.