When you start learning to code, Loops are one of the very first core concepts you encounter. While they might seem a bit confusing at first, loops are simply a way to save yourself from writing repetitive code manually.

In this guide, we’ll break down what loops are, how they work, and why they are essential for every developer

What is a Loop?

Imagine you are asked to print the words "Hello World" on your screen 10 times. You could write print("Hello World") 10 separate times in your code.

Now, what if you were asked to print it 1,000 times?

Writing the same line a thousand times isn't practical or efficient. This is where loops come in.

A loop is a sequence of instructions that continually repeats a block of code until a specific condition is met.

Real-World Analogy

We encounter loops in our everyday lives all the time:

• Music Player in Repeat Mode: A song plays to the end and automatically restarts from the beginning—repeating until you hit the pause button.

• Running Laps: If you decide to run 5 laps around a track, you run a lap, count it, and repeat until your counter reaches 5, at which point you stop.

2. Common Types of Loops in JavaScript

JavaScript provides several built-in loops for different scenarios:

A. The for Loop

Use a for loop when you know exactly how many times you want to run a piece of code.

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

console.log(`Iteration number: ${i}`);

}

Initial expression (let i = 1): Sets up the counter variable.

Condition (i <= 5): Evaluated before each iteration. If true, the loop runs.

Update clause (i++): Increments the counter after every run.

B. The while Loop

Use a while loop when you want the loop to continue running as long as a condition evaluates to true.

let battery = 100;

while (battery > 0) {

console.log(`Battery level: ${battery}%`);

battery -= 25; // Decreases battery by 25 each cycle

}

console.log("Battery empty!");

C. The for...of Loop (Working with Arrays)

JavaScript introduced for...of in ES6 to make iterating over arrays cleaner and easier to read.

const fruits = ["Apple", "Banana", "Mango", "Orange"];

for (const fruit of fruits) {

console.log(`Fruit: ${fruit}`);

}

D. The forEach() Array Method

While technically a method on array prototypes rather than a traditional loop statement, forEach() is widely used in modern JavaScript for array traversal.

const numbers = [10, 20, 30, 40];

numbers.forEach((num) => {

console.log(`Number: ${num}`);

});

3. Controlling Loops: break and continue

JavaScript gives you tools to stop a loop early or skip specific steps:

break: Exits the loop entirely.

continue: Skips the current iteration and jumps to the next one.

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

if (i === 3) {

continue; // Skips printing 3

}

if (i === 5) {

break; // Stops the loop completely when i reaches 5

}

console.log(i);

}

// Output: 1, 2, 4

4. Beware of Infinite Loops

If your loop condition never becomes false, your browser tab will freeze due to an infinite loop.

// DON'T DO THIS:

let count = 1;

while (count > 0) {

console.log("This will hang your browser!");

// Missing update statement like count++ or count--

}

Always ensure your exit condition will eventually be met.

Conclusion

Loops are a fundamental building block of JavaScript development, whether you are manipulating the DOM, processing API data, or building complex logic.