When you start learning JavaScript, you quickly realize that many tasks repeat in coding.
For example –
- When You Print numbers from 1 to 10.
- Show all items in an array.
- Calculate total marks.
- Run the same logic multiple times.
If you write the same line again and again, our code becomes long and messy. That’s where the for loop in JavaScript helps us. It allows you to repeat a block of code in a clean, structured, and controlled way.
In this guide, I will explain everything in an easy way, so that you can understand it easily.
What Is a for Loop in JavaScript?
A for loop is a programming structure that runs a block of code multiple times. You use it when –
- You know how many times the code should run.
- You want to control repetition using a counter.
- You want clean and readable looping logic.
Think of it like this –
Instead of saying:
“Print 1, Print 2, Print 3, Print 4, Print 5”
You say –
“Start from 1 and keep printing until you reach 5.”
That is exactly what a for loop does.
Basic Syntax of for Loop in JavaScript
Here is the structure –
for (initialization; condition; update) {
// code to repeat
}
Now, let’s understand each part one by one.
1️⃣ Initialization
This is where we create a counter variable. It runs only once when the loop starts.
For Example –
let i = 1;
You usually start counting from 0 or 1, depending on the requirements.
2️⃣ Condition
This condition tells the loop to how long it should continue running.
If the condition is true, the loop runs. If the condition becomes false, the loop stops immediately.
For Example –
i <= 5
This means –
“Keep running the loop as long as i is less than or equal to 5.”
3️⃣ Update
After each round, the loop updates the counter.
For Example –
i++
This increases the value of i by 1 after every loop cycle. Without this update, the loop would never stop. So it’s very important.
Now let’s combine everything with easy-to-read examples.
Example 1 – Printing Numbers from 1 to 5
for (let i = 1; i <= 5; i++) {
console.log(i);
}
Now let’s understand what actually happens step by step.
Step 1:
let i = 1
The loop will start with i = 1.
Step 2:
Now, the JavaScript checks the condition –
Is 1 <= 5?
Yes → So it runs the code inside.
It prints:
1
Step 3:
Now the update runs:
i++ → i becomes 2.
Step 4:
JavaScript checks again:
Is 2 <= 5?
Yes → Print 2.
This process continues until:
i becomes 6
Now the condition becomes false (6 <= 5 ❌)
So the loop stops.
Final Output:
1
2
3
4
5
You can see how clean and powerful this is.
Example 2- Loop with an Array
Now let’s use a for loop with an array.
const fruits = ["Apple", "Banana", "Cherry"];
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
Here is what happens.
Why did We Start From 0?
Because arrays in JavaScript start counting from index 0.
So:
- Apple → index 0
- Banana → index 1
- Cherry → index 2
Understanding the Condition
i < fruits.length
If the array has 3 items,
fruits.length = 3
So the loop runs while:
i < 3
That means:
- i = 0 → Print Apple
- i = 1 → Print Banana
- i = 2 → Print Cherry
- i = 3 → Stop (condition false)
This way, the loop automatically goes through every item in the array.
You don’t need to manually write:
console.log(fruits[0])
console.log(fruits[1])
console.log(fruits[2])
The loop handles everything for you.
Example 3 – Calculating the Sum of Numbers
Now let’s build something practical. We want to calculate the sum of numbers from 1 to 10.
let sum = 0;
for (let i = 1; i <= 10; i++) {
sum += i;
}
console.log("Total:", sum);
Let’s break this clearly.
Step 1:
We create a variable called sum and set it to 0.
Why 0?
Because we want to start adding numbers from zero.
Step 2:
The loop starts from i = 1.
Step 3:
Each time the loop runs, it does:
sum = sum + i
So it becomes:
- 0 + 1 = 1
- 1 + 2 = 3
- 3 + 3 = 6
- 6 + 4 = 10
- …
It continues until i reaches 10.
Finally, it prints:
Total: 55
This example shows how powerful the for loop becomes in real programs.
When Should You Use a for Loop?
You should use a for loop when:
✔ You know the number of repetitions
✔ You want to loop through an array
✔ You need counting logic
✔ You want full control over start and end
If you need precise control over iteration, the for loop is perfect.
Common Mistakes Which Beginners Make
➤ Forgetting the Update Part ❌
for (let i = 0; i < 5; ) {
console.log(i);
}
Here, i never increase.
So the condition stays true forever.
This creates an infinite loop, which can freeze your browser.
➤ Writing the wrong condition ❌
If you write:
i > 5
The loop may never run at all.
Always double-check your condition.
Bottom Line
The for loop in JavaScript is simple but extremely powerful. Once you understand –
- Initialization
- Condition
- Update
If you are learning JavaScript as a beginner, practice writing small loops daily. Try printing even numbers, odd numbers, reverse counting, or looping through arrays.
Once you feel comfortable with for loops, you will find many programming problems much easier to solve.
Master the basics, and the advanced concepts will automatically become simpler.
Read Also –
