Learn / JavaScript / Control Flow & Loops
Lesson 5 of 6

Control Flow & Loops

Every program is really just two skills stacked on top of each other: deciding (if this, then that) and repeating (do this again, and again, until done). Master those two, and you can build almost anything.

💡 The Bottom Line

if / else makes decisions. for and while repeat work. Almost every bug you'll write in your first year comes from one of these two things doing something slightly different from what you pictured — so read them literally, not optimistically.

Making decisions

const hour = 14;

if (hour < 12) {
  console.log("Good morning");
} else if (hour < 18) {
  console.log("Good afternoon");
} else {
  console.log("Good evening");
}
// prints "Good afternoon"

The condition inside ( ) must evaluate to true or false. Common comparison operators: === (equal), !== (not equal), <, >, <=, >=. Combine conditions with && (and) and || (or).

⚠️ Watch Out

Always use === (triple equals), not == (double equals). == does type coercion before comparing — "5" == 5 is true, which causes real bugs. === checks value and type together, so "5" === 5 is false, exactly as you'd expect.

Switch — for many exact matches

const day = "Tue";

switch (day) {
  case "Mon":
    console.log("Start of the week");
    break;
  case "Tue":
  case "Wed":
  case "Thu":
    console.log("Midweek grind");
    break;
  case "Fri":
    console.log("Almost there");
    break;
  default:
    console.log("Weekend!");
}
// prints "Midweek grind"

Use switch when you're comparing one value against many exact possibilities — it reads cleaner than a long chain of else if.

Repeating work — loops

// for loop — when you know how many times to repeat
for (let i = 1; i <= 5; i++) {
  console.log(`Rep ${i}`);
}

// while loop — when you don't know in advance, only the stopping condition
let attempts = 0;
while (attempts < 3) {
  console.log(`Attempt ${attempts + 1}`);
  attempts++;
}

A for loop packs three things into its parentheses: where to start (let i = 1), when to stop (i <= 5), and what to do after each round (i++, meaning "add 1"). Get any one of those three wrong, and you get either an infinite loop or one that never runs.

🙋 There Are No Dumb Questions

Q: My browser froze — did I break it?
A: You almost certainly wrote an infinite loop — a while whose condition never becomes false, or a for loop whose counter never reaches its limit. It happens to everyone. Close the tab, check your stopping condition, try again.

A quick look ahead: looping over arrays

You'll meet arrays properly in a later topic, but since loops and lists go hand in hand, here's a preview using forEach — a method built onto every array that runs a function once per item:

const cities = ["Chennai", "Karaikkudi", "Madurai"];

cities.forEach((city) => {
  console.log(`Visiting ${city}`);
});

🔧 Try It Yourself

Write a for loop that prints the numbers from 1 to 20, but for multiples of 3 prints "Fizz" and for multiples of 5 prints "Buzz" instead of the number. (This is the famous "FizzBuzz" exercise — almost every developer has written it at least once.)

for (let i = 1; i <= 20; i++) {
  // your code here — use % (modulo) to check "divisible by"
  // hint: i % 3 === 0 means i is a multiple of 3
}

✅ Quick Check

Why should you use === instead of == when comparing values?

Everything so far has lived in the console. Lesson 6 finally connects your code to an actual page — clicking buttons, changing text, reacting to what a person does.

← Back to
Next →