Introduction to JavaScript Loops

Why Repeat Yourself?

In programming, you often need to perform the same action over and over. Imagine you want to display a message on the screen 100 times. You could write the same line of code 100 times, but that would be tedious and inefficient. What if you needed to change the message? You'd have to edit all 100 lines.

This is where loops come in. Loops are a fundamental concept in programming that allow you to execute a block of code repeatedly. They save you time, make your code cleaner, and reduce the chance of errors. Think of it like telling a friend to "take five steps forward" instead of saying "step, step, step, step, step."

Loops help you repeat actions without writing the same code over and over.

JavaScript's Loop Toolkit

JavaScript provides several different types of loops, but they all serve the same basic purpose: to repeat a task until a certain condition is met. The three most common loops you'll encounter are the for loop, the while loop, and the do...while loop. Choosing the right one depends on the situation.

The For Loop

The for loop is your go-to when you know exactly how many times you want to repeat an action. It's like having a counter that keeps track of the repetitions for you. It's structured into three parts: initialization, condition, and final expression.

// This loop will run 3 times.
for (let i = 0; i < 3; i++) {
  console.log("The number is " + i);
}

// Output:
// The number is 0
// The number is 1
// The number is 2

Let's break that down:

Initialization: let i = 0; creates a counter variable, i, and starts it at 0.
Condition: i < 3; tells the loop to continue running as long as i is less than 3.
Final Expression: i++ increases the counter i by one after each time the loop runs.

The While Loop

What if you don't know how many times you need to loop? The while loop is perfect for this scenario. It continues to execute a block of code as long as a specified condition is true. Think of it as saying, "Keep doing this while this condition holds up."

The condition is checked before the code inside the loop is executed.

let isRunning = true;
let energy = 3;

while (isRunning) {
  console.log("The machine is running.");
  energy--;
  if (energy === 0) {
    isRunning = false; // This will stop the loop
  }
}

// Output:
// The machine is running.
// The machine is running.
// The machine is running.

The Do...While Loop

The do...while loop is a close cousin of the while loop. The main difference is that the do...while loop will always execute its code block at least once, regardless of whether the condition is true or false. This is because the condition is checked after the code block runs.

let shouldRun = false;

do {
  console.log("This message will appear once.");
} while (shouldRun === true);

// Output:
// This message will appear once.

Even though the shouldRun variable was false from the beginning, the code inside the do block executed one time before the while condition was checked. This is useful for situations where you need an action to happen at least once, like prompting a user for input.

Understanding these three loops gives you the power to control the flow of your programs and handle repetitive tasks with ease.

JavaScript While Loops Explained