Loops in JavaScript: Complete Overview of All Loop Types

Welcome back! 👋 In the previous lessons, you learned how to make decisions with conditional statements. Now it's time to make your programs repeat tasks automatically — without writing the same code over and over!

Loops are one of the most powerful concepts in programming. They let you run a block of code multiple times — whether that's 5 times, 1000 times, or until a condition changes.

In this lesson, we'll cover what loops are, why they matter, and get a quick look at all five loop types JavaScript offers. Each loop has its own dedicated lesson where we go deep!

What is a Loop?

A loop is a control structure that repeats a block of code as long as a condition is true.

The Problem Loops Solve

Imagine printing numbers 1 to 100. Without a loop:

// ❌ Without loops — painful and impractical
console.log(1);
console.log(2);
console.log(3);
// ... 97 more lines
console.log(100);

With a loop:

// ✅ With a loop — 2 lines, same result
for (let i = 1; i <= 100; i++) {
  console.log(i);
}

That's the power of loops — less code, more control.

How a Loop Works

Every loop has three core ingredients:

• Start — where does the loop begin?
• Condition — when should it keep running?
• Update — what changes after each repetition?

//   Start      Condition    Update
for (let i = 1; i <= 5;     i++) {
  console.log(i); // Runs 5 times
}

As long as the condition is true, the loop keeps going. When it becomes false, the loop stops.

The 5 Loop Types in JavaScript

JavaScript gives you five loop types, each suited for different situations:

1. for Loop

Use when you know exactly how many times to repeat.

for (let i = 1; i <= 3; i++) {
  console.log("for loop:", i);
}
// 1, 2, 3

➡️ Deep dive: For Loop →

2. while Loop

Use when you repeat until a condition changes and don't know the count upfront.

let i = 1;
while (i <= 3) {
  console.log("while loop:", i);
  i++;
}
// 1, 2, 3

➡️ Deep dive: While Loop →

3. do...while Loop

Like while, but the body always runs at least once — even if the condition is false from the start.

let i = 1;
do {
  console.log("do...while:", i);
  i++;
} while (i <= 3);
// 1, 2, 3

➡️ Deep dive: Do While Loop →

4. for...of Loop

Use to loop over values of arrays, strings, and other iterables — cleanly, without an index.

let fruits = ["Apple", "Banana", "Mango"];
for (let fruit of fruits) {
  console.log(fruit);
}
// Apple, Banana, Mango

➡️ Deep dive: For...of Loop →

5. for...in Loop

Use to loop over keys (property names) of an object.

let person = { name: "Mihir", age: 25, city: "Mumbai" };
for (let key in person) {
  console.log(key, ":", person[key]);
}
// name: Mihir,  age: 25,  city: Mumbai

➡️ Deep dive: For...in Loop →

Quick Comparison

Two Important Loop Control Keywords

Before going into each loop in depth, know these two keywords — you'll see them in every loop:

break — stops the loop immediately and exits.

for (let i = 1; i <= 10; i++) {
  if (i === 4) break; // Stop at 4
  console.log(i);
}
// Output: 1  2  3

continue — skips the current iteration and moves to the next.

for (let i = 1; i <= 5; i++) {
  if (i === 3) continue; // Skip 3
  console.log(i);
}
// Output: 1  2  4  5

We'll explore break and continue in detail in each loop's dedicated lesson.

Key Takeaways

✅ A loop repeats a block of code as long as a condition is true.

✅ Every loop needs a start, a condition, and an update — or it may run forever!

✅ JavaScript has 5 loop types — each with its own ideal use case:

• for → known count
• while → unknown count, condition-based
• do...while → run at least once
• for...of → array/string values
• for...in → object keys

✅ break exits a loop early. continue skips one iteration.

What's Next?

Now that you have the full picture, let's go deep on each one — starting with the most used loop of all:

the For Loop →! In the next lesson, we'll break down its syntax, see real-world examples, and learn how to use it like a pro.

Let's go! 💪