The Magic of Repetition: A Beginner’s Guide to the JavaScript for Loop

In our last guide, you learned how to make your webpage “smart” by using if/else statements to make decisions. That’s a huge step! But what happens when you need to perform the same action multiple times?

Imagine you needed to greet ten different people. You could write console.log("Hello!") ten times, but what if you needed to greet a thousand people? That would be exhausting and inefficient.

This is where loops come in. Loops are a fundamental concept in programming that allow you to run the same block of code over and over again. Today, we’ll learn about the most common type: the for loop.

The Anatomy of a for Loop

The for loop looks a bit intimidating at first, but it’s just a highly organized counting machine. It’s made up of three parts that work together.

The basic structure looks like this:

for (initialization; condition; increment) {
  // code to be repeated
}

Let’s break down those three parts inside the parentheses:

1. Initialization: Where do we start counting? This is where we create a counter variable. By convention, it’s almost always named i (for “index”). We’ll usually start it at 0. Example: let i = 0;
2. Condition: How long should we keep looping? The loop will continue to run as long as this condition is true. Example: i < 5; (Keep going as long as i is less than 5).
3. Increment: How do we get to the next step? This part runs after each loop to update our counter. Example: i++ (This is just a shorthand way of saying i = i + 1).

When you put them all together, you get a loop that runs its code block five times (for i = 0, 1, 2, 3, and 4).

Let’s Write Our First Loop

Open your script.js file. You can delete the code from the last lesson. Let’s write a simple for loop that logs numbers to the console.

// script.js

console.log("Starting the loop!");

for (let i = 1; i <= 5; i++) {
  // This code will run 5 times.
  // Each time, the value of 'i' will be different.
  console.log("The current number is:", i);
}

console.log("The loop has finished!");

How to see the result?

1. Save your script.js file.
2. Open your index.html file in the browser (or refresh the tab if it’s already open).
3. Open the developer console (Right-click -> Inspect -> Console).

You should see this output:

Starting the loop!
The current number is: 1
The current number is: 2
The current number is: 3
The current number is: 4
The current number is: 5
The loop has finished!

Look at that! With just three lines of code, you performed five distinct actions. That’s the power of loops.

A More Practical Example: Working with a List

The single most common use for a for loop is to go through a list of items. In JavaScript, a list is called an Array. Let’s say we have a list of our favorite hobbies.

This example will give you a sneak peek into our next topic!

Step 1: Create a List (an Array)

In your script.js file, replace the previous code with this. We’re creating a simple array of strings.

// An array is just a list of items inside square brackets []
const hobbies = ["Reading", "Gaming", "Coding", "Hiking", "Cooking"];

Step 2: Loop Through the List

Now, we’ll use a for loop to go through every single item in our hobbies array and print it out.

// An array is just a list of items inside square brackets []
const hobbies = ["Reading", "Gaming", "Coding", "Hiking", "Cooking"];

console.log("Here are my hobbies:");

// Let's loop through our array!
// We start at index 0 and go up to the last item.
// '.length' gives us the total number of items in the array (in this case, 5).
for (let i = 0; i < hobbies.length; i++) {
  // Inside the loop, we can access the item at the current position 'i'.
  // hobbies[0] is "Reading", hobbies[1] is "Gaming", and so on.
  console.log(hobbies[i]);
}

What’s happening here?

• We create an array called hobbies.
• The loop starts at i = 0 (arrays in JavaScript are “zero-indexed,” meaning the first item is at position 0).
• The loop continues as long as i is less than hobbies.length (the total number of items).
• Inside the loop, hobbies[i] gets the item at the current position of the counter.
• The console.log() prints that item.

Save your file and check the console in your browser. You should see:

Here are my hobbies:
Reading
Gaming
Coding
Hiking
Cooking

You just performed the most essential task in programming: iterating over a list of data.

What’s Next? Managing Data

You’ve now mastered the two fundamental pillars of programming logic: making decisions (if/else) and handling repetition (for loops).

You also just got a preview of one of the most important data structures in JavaScript: the Array.

In our next guides, we’ll officially dive into two crucial JavaScript data types: Strings (how we work with text) and Arrays (how we manage lists). You’ll be a pro at working with data in no time.