Quest 1 • Lesson 5
🔄 JavaScript Loops
Stop repeating yourself. Learn to run code over and over with for, while, and do-while loops.
A loop repeats a block of code until a condition is met. Without loops, printing numbers 1-100 would take 100 lines of code. With a loop, it takes 3.
for, while, and do-while. Each has a specific purpose."
1️⃣ The for Loop
Best when you know how many times to repeat. It has three parts: initialization, condition, and increment.
for (let i = 1; i <= 5; i++) {
console.log(i);
}
// Output:
// 1
// 2
// 3
// 4
// 5Anatomy of a for loop:
let i = 1 — start counting from 1
i <= 5 — keep going while this is true
i++ — add 1 after each iteration
🎬 Interactive: Watch a Loop Run
Click Step to run the loop one iteration at a time, or Auto Run to see it all at once.
2️⃣ The while Loop
Use when you don't know how many times to loop — you loop as long as a condition is true.
let count = 1;
while (count <= 5) {
console.log("Count:", count);
count++;
}
// Output:
// Count: 1
// Count: 2
// Count: 3
// Count: 4
// Count: 5⚠️ Infinite loop warning: If you forget to update the variable inside the loop (like count++), the condition never becomes false — and your program freezes. This is the #1 beginner mistake.
3️⃣ The do-while Loop
Like a while loop — but it always runs at least once, because the condition is checked at the end.
let input;
do {
input = prompt("Enter a number greater than 10:");
} while (input <= 10);
console.log("You entered:", input);💡 Use case: Form validation, game loops, "waiting for user to do something" situations — anywhere the code must run at least once.
4️⃣ Looping Through Arrays
The most common real-world use: iterate over arrays.
const fruits = ["apple", "banana", "cherry"];
// Classic for loop
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
// Modern for...of loop (cleaner)
for (const fruit of fruits) {
console.log(fruit);
}
// Array method forEach (most readable)
fruits.forEach(fruit => console.log(fruit));Which to use?
→ for...of — the modern default for arrays
→ forEach — when you want concise, functional style
→ Classic for — when you need the index (i) or to break early
✖️ Interactive: Multiplication Table
Enter a number and see its multiplication table generated by a loop.
5️⃣ break and continue
Control your loop mid-flight:
// break: exit the loop entirely
for (let i = 1; i <= 10; i++) {
if (i === 5) break;
console.log(i); // 1, 2, 3, 4
}
// continue: skip this iteration, keep looping
for (let i = 1; i <= 5; i++) {
if (i === 3) continue;
console.log(i); // 1, 2, 4, 5
}💡 Real use case: Use break when you find what you're searching for and don't need to keep looking. Use continue to skip invalid items in a list.
🚀 Try It Live
Edit the code and click Run.
✨ Challenge: Even Numbers Only
Write a loop that prints only even numbers from 1 to 20, using the % operator and continue.
📚 What's Next?
- Lesson 1.6: Functions → — write reusable blocks of code.
- ← Previous: Lesson 1.4 Conditionals
- ⚡ JavaScript Course Hub →
❤️ Support Free Education
This course is 100% free. If it helps you, consider buying me a coffee.
☕ Buy Me a Coffee