Learn For Loops in 5 minutes! 🔁
Watch how a for loop repeats code
🧙♂️ The Story of the For Loop: "The Tireless Apprentice"
Long ago, in a kingdom called Logic, there was a wizard who had an extremely tedious task: polishing 100 magic stones – one by one.
His apprentice, named For, said to the master:
Master, instead of you having to tell me each time, why don't you give the command just once, and I'll repeat it myself until it's done?
The master thought this made sense, and said:
Then number the 100 stones from 1 to 100, start polishing from stone number 1.
When finished, move to the next stone (2 -> 3 -> 4 ...).
Continue until you complete the 100th stone.
And thus, the for loop was born.
The Code
| Variable: | stoneNumber = 0 |
| Initialize: | stoneNumber =0 |
| → | placeholder |
Visual Output
How For Loops Work 📚
For Loop Formula
In the demo above:
1. Initialize: Set starting value (stoneNumber = 0)
2. Check condition: Is stoneNumber < 5? If yes, continue. If no, exit loop.
3. Execute code: Run the code inside the loop
4. Update: Update the variable (can be increment, decrement, or any operation)
5. Repeat: Go back to step 2
Real-World Examples
Loops are everywhere in daily life:
- 🎴 Playing Cards: Deal cards to each player (loop through players), then loop through each player's turn
- 📖 Reading a Book: Start at page 1 → page 2 → page 3... until the last page
- 🪜 Climbing Stairs: Step 1 → Step 2 → Step 3... until you reach the top
- 🎵 Music Playlist: Play song 1 → song 2 → song 3... until playlist ends
- 📁 Desktop Folder: Display file 1, file 2, file 3... for each file in folder
Loop Flow Diagram
📦 Arrays and For Loops
Imagine you have a treasure chest with 5 magic stones:
stones = [🔴, 🔵, 🟢, 🟡, 🟣]Each stone has a position number (index):
| Position: | 0 | 1 | 2 | 3 | 4 |
|---|---|---|---|---|---|
| Stone: | 🔴 | 🔵 | 🟢 | 🟡 | 🟣 |
Using For Loop with Array:
To access each stone, we use the loop counter as the index:
for (let i = 0; i < stones.length; i++) {
console.log(stones[i]);
}Output:
🧪 Try It Now!
Experiment with the loop parameters and see the magic stones appear!
📝 Code
for (let stoneNumber = 0; stoneNumber < 5; stoneNumber += 1) {
// Display magic stone
displayStone(stoneNumber);
}✨ Output
Click "Run Loop" to see magic stones appear!
💡 Tip: Try different combinations! Notice how changing the step value affects how many stones appear. The loop will keep going until the counter (i) reaches the end value.
🎯 Fun Fact: Why Start at 0?
Why when iterating loops/accessing array elements usually start from 0 instead of 1?
for (let stoneIndex = 0; stoneIndex < stones.length; stoneIndex++) {
console.log(stones[stoneIndex]);
}In programming, most languages use zero-based indexing. Because arrays (lists of items) are indexed starting at 0!
Here's how it works in computer memory. Suppose you have an array starting at address 1000, and each element takes 4 bytes:
📍address of arr[0] = 1000 + 0 * 4 = 1000
📍address of arr[1] = 1000 + 1 * 4 = 1004
📍address of arr[2] = 1000 + 2 * 4 = 1008
📍address of arr[3] = 1000 + 3 * 4 = 1012
📍address of arr[4] = 1000 + 4 * 4 = 1016
Why is this useful?
✓ Arrays line up with memory offsets, so index 0 means "start right at the first stored value"
✓ Each increment moves to the next memory slot automatically—no extra math needed
✓ The condition i < stones.length stops the loop before it reads memory that doesn’t belong to the array
✓ This zero-based pattern scales to any array size while keeping memory access predictable
Note: Most programming languages (C, C++, Java, JavaScript, Python, etc.) use zero-based indexing. This makes calculations simpler and more efficient!
Learn more about zero-based numbering on Wikipedia
🌍 For Loop Syntax in Popular Languages
The for loop concept is universal! Here's how it looks in different programming languages. Click RUN to see the output!
JavaScript Syntax
▶ Click RUN to execute💡 Note: While the syntax differs slightly between languages, the core concept remains the same: initialize a counter, check a condition, execute code, and update the counter. Try running the code and modify it to see how it works!
💡 Tips & FAQ
Master for loops with these advanced tips and common questions answered!
Mini Challenges 🎯
Test your for loop skills with these coding challenges! Choose your favorite programming language and solve the problems.
🎓 Pro Tip: Try solving each challenge yourself before looking at the solution. Learning happens when you struggle a bit!
Related Articles & Resources 📚
Explore more content to deepen your understanding of loops and programming concepts.
Coming soon! We're curating the best articles and resources for you.
🎉 Great job completing this lesson!
How was your experience? Your feedback helps us improve!
Tell us what you liked, what could be better, or suggest new topics!