Loops are one of the most powerful features in JavaScript. They allow you to execute a block of code multiple times without writing the same code repeatedly. This process of repeating code is called iteration.

Imagine you need to display numbers from 1 to 100. Writing 100 separate console.log() statements would be inefficient. A loop can perform the same task with just a few lines of code.

Loops help developers automate repetitive tasks and write cleaner, more efficient programs.

Why Are Loops Important?

Many real-world applications require repeating actions.

For example:

• Displaying a list of products on an online store.
• Sending notifications to multiple users.
• Processing records from a database.
• Generating reports.
• Validating multiple form fields.

Instead of writing the same code repeatedly, loops allow JavaScript to handle these tasks automatically.

The for Loop

The for loop is one of the most commonly used loops in JavaScript.

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

Output:

1
2
3
4
5

Understanding the Syntax

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

• Initialization runs once at the beginning.
• Condition is checked before each iteration.
• Update runs after each iteration.

The loop continues until the condition becomes false.

The while Loop

The while loop executes as long as a condition remains true.

let count = 1;

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

Output:

1
2
3
4
5

The condition is checked before each iteration.

The do...while Loop

The do...while loop is similar to the while loop, but it always executes at least once.

let number = 1;

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

Output:

1
2
3
4
5

Even if the condition is false initially, the code inside the loop runs once.

The for...of Loop

The for...of loop is used to iterate through arrays and other iterable objects.

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

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

Output:

Apple
Banana
Mango

This loop makes it easy to access each item in an array.

The for...in Loop

The for...in loop is commonly used to iterate through object properties.

let user = {
    name: "John",
    age: 25
};

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

Output:

name John
age 25

It allows you to access each property of an object.

Using break and continue

break

The break statement stops a loop immediately.

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

Output:

1
2
3
4

continue

The continue statement skips the current iteration and moves to the next one.

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

Output:

1
2
4
5

Real-World Example

Imagine an online store displaying products.

let products = ["Laptop", "Phone", "Headphones"];

for (let product of products) {
    console.log(product);
}

Instead of writing separate code for each product, a loop automatically displays all items in the list.

Summary

Loops allow JavaScript to repeat tasks efficiently. The for, while, do...while, for...of, and for...in loops each serve different purposes. Loops help developers process large amounts of data, work with arrays and objects, and automate repetitive tasks. Understanding loops is essential because they are used in almost every real-world JavaScript application.