# Understanding Loops in JavaScript: Automating Repetitive Tasks

In the previous parts of the **JavaScript Decoded** series, we tackled how to store data and how to build reusable blocks of code using Functions. But what happens when you need to run the exact same block of code 10, 100, or even 1,000 times?

Imagine you are building an app that prints the lyrics to *“99 Bottles of Milk on the Wall.”* Typing `console.log()` 99 times would be a nightmare!

This is exactly where **Loops** come in.

Loops are one of the most powerful concepts in programming. They allow you to **execute a block of code repeatedly** until a specific condition is met, saving you time and keeping your code incredibly clean.

In this guide, you will learn:

*   What loops are and why they are essential
    
*   The classic `for` loop (and its 3 crucial parts)
    
*   The `while` loop (and how to avoid infinite loops!)
    
*   The `do...while` loop
    
*   The `break` and `continue` keywords
    
*   A sneak peek at looping through arrays
    

Let’s get looping! 🔄

* * *

## 1\. The Classic `for` Loop

The `for` loop is the most common loop in JavaScript. You will use this loop when you know **exactly how many times** you want your code to run.

It might look a bit intimidating at first, but it follows a very strict, reliable structure.

### Syntax Breakdown

A `for` loop requires three statements separated by semicolons `;`:

```javascript
for (initialization; condition; afterthought/update) {
  // Code to be repeated goes here
}
```

Let's look at a real example where we count from 1 to 5.

```javascript
for (let i = 1; i <= 5; i++) {
  console.log("Count is: " + i);
}

// Output:
// Count is: 1
// Count is: 2
// Count is: 3
// Count is: 4
// Count is: 5
```

### What exactly is happening here?

1.  `let i = 1` **(Initialization)**: We create a variable `i` (short for *index* or *iterator*) and set it to 1. This happens exactly **once**, before the loop even starts.
    
2.  `i <= 5` **(Condition)**: Before every single loop, JavaScript checks this condition. If it is `true`, the loop runs. If it is `false`, the loop stops and the code moves on.
    
3.  `i++` **(Update)**: After the code inside the curly braces finishes running, this statement executes. Here, we add 1 to `i`. Then, the loop goes back to step 2 to check the condition again!
    

* * *

## 2\. The `while` Loop

While the `for` loop is great when you know the exact number of iterations, the `while` loop is perfect for when you **don't know how many times the loop needs to run**. It just keeps running *while* a condition remains true.

### Syntax Breakdown

```javascript
while (condition is true) {
  // Run this code
}
```

Let's rewrite our 1 to 5 counter using a `while` loop:

```javascript
let count = 1; // Initialization happens outside

while (count <= 5) {
  console.log("While loop count: " + count);
  count++; // CRITICAL: You must update the variable inside the loop!
}
```

### ⚠️ Beware the Infinite Loop!

What happens if you forget to include `count++` in the example above? The `count` will stay at `1` forever. Since `1 <= 5` will always be true, the loop will run infinitely, freeze your browser, and crash your program!

**Always make sure the condition in a** `while` **loop will eventually become** `false`**.**

* * *

## 3\. The `do...while` Loop

The `do...while` loop is the quirky cousin of the `while` loop.

In a standard `while` loop, JavaScript checks the condition *before* running the code. If the condition is false from the very beginning, the code never runs.

A `do...while` loop is different: it executes the code block **first**, and *then* checks the condition. This guarantees that your code will run **at least once**, no matter what.

### Syntax Breakdown

```javascript
let number = 10;

do {
  console.log("This will print at least once! Number is: " + number);
  number++;
} while (number < 5);

// Output:
// "This will print at least once! Number is: 10"
```

Even though `10 < 5` is `false`, the text still prints once because the condition check happens at the very end!

* * *

## Controlling the Chaos: `break` and `continue`

Sometimes, you need to micromanage your loop while it is running. JavaScript gives you two keywords to do this.

### The `break` Statement

The `break` statement instantly "breaks out" of the loop entirely, stopping all future iterations.

```javascript
for (let i = 1; i <= 10; i++) {
  if (i === 5) {
    console.log("Hit 5! Breaking the loop early.");
    break; // Loop stops completely here
  }
  console.log(i);
}
// Outputs: 1, 2, 3, 4, "Hit 5! Breaking the loop early."
```

### The `continue` Statement

The `continue` statement is less aggressive. Instead of stopping the whole loop, it just skips the *current* iteration and instantly moves on to the next one.

```javascript
for (let i = 1; i <= 5; i++) {
  if (i === 3) {
    continue; // Skips logging '3'
  }
  console.log(i);
}
// Outputs: 1, 2, 4, 5
```

* * *

## A Sneak Peek: Looping Through Data

In the real world, you rarely use loops just to print numbers. You usually use loops to go through lists of data—like a list of users, products, or high scores.

In JavaScript, lists of data are called **Arrays**. Here is a sneak peek of how powerful a `for` loop is when combined with an array:

```javascript
let favoriteColors = ["Red", "Blue", "Green", "Purple"];

// We start at index 0, and stop when we hit the length of the array!
for (let i = 0; i < favoriteColors.length; i++) {
  console.log("A great color is: " + favoriteColors[i]);
}
```

We will dive deep into Arrays in **Part 6** of this series, but now you understand the mechanical engine that makes reading lists of data possible!

* * *

## Your Turn: Loop Assignments 💻

The only way to get comfortable with loops is to write them! Try these challenges in your code editor:

1.  Write a `for` loop that prints all **even numbers** between 2 and 20.
    
2.  Write a `while` loop that counts **down** from 10 to 1, and then prints "Blast off! 🚀".
    
3.  Add a `break` statement to your blast-off loop so that if the countdown hits 5, the loop stops early and prints "Launch aborted!" instead.
    

* * *

## What's Next?

Now that you know how to automate repetitive tasks, you are ready to learn how to store the complex lists of data that these loops were meant to iterate over!

Up next in the **JavaScript Decoded** series:

*   **Arrays 101** — How to store and access ordered lists of data
    
*   **Array Methods** — Built-in tricks for managing arrays
    
*   **Objects** — Storing data using key-value pairs
    

Happy coding! 🎉