Control Flow in JavaScript

Every program you write makes decisions. Learning how to control those decisions is one of the most fundamental skills in programming. Let's break it down — simply, clearly, and with real-world examples.

---

🧠 What is Control Flow?

Imagine you're getting ready in the morning. You think:

• "If it's raining, I'll take an umbrella."

• "If I'm hungry, I'll eat breakfast — otherwise, I'll skip it."

• "Depending on what day it is, I'll go to work, class, or the gym."

That's control flow — making decisions based on conditions.

In programming, control flow refers to the order in which your code executes. By default, JavaScript runs line by line, top to bottom. But with control flow statements, you can make your program branch — taking different paths based on conditions.

---

1️⃣ The if Statement

The if statement is the simplest form of decision-making. It runs a block of code only if a condition is true.

Syntax

if (condition) {
  // code runs if condition is true
}

Real-Life Example

let age = 20;

if (age >= 18) {
  console.log("You are eligible to vote.");
}
// Output: You are eligible to vote.

If age were 15, nothing would be printed — the block is simply skipped.

---

2️⃣ The if-else Statement

What if you want to do something when the condition is false too? That's where else comes in.

Syntax

if (condition) {
  // runs if condition is true
} else {
  // runs if condition is false
}

Real-Life Example

let marks = 45;

if (marks >= 50) {
  console.log("You passed! 🎉");
} else {
  console.log("You didn't pass. Keep trying! 💪");
}
// Output: You didn't pass. Keep trying! 💪

Think of else as your fallback plan — it always catches the case your if misses.

---

3️⃣ The else if Ladder

Sometimes there are more than two possibilities. You need to check multiple conditions in sequence. That's where else if comes in.

Syntax

if (condition1) {
  // runs if condition1 is true
} else if (condition2) {
  // runs if condition2 is true
} else {
  // runs if none of the above are true
}

Real-Life Example

let marks = 72;

if (marks >= 90) {
  console.log("Grade: A+");
} else if (marks >= 75) {
  console.log("Grade: A");
} else if (marks >= 60) {
  console.log("Grade: B");
} else if (marks >= 50) {
  console.log("Grade: C");
} else {
  console.log("Grade: F — Please retake the exam.");
}
// Output: Grade: B

JavaScript checks each condition from top to bottom and stops as soon as one is true. The rest are ignored.

💡 Tip: Always put the most specific condition first. If you put marks >= 50 before marks >= 90, a student with 95 marks would incorrectly get a "C"!

---

4️⃣ The switch Statement

When you have one variable that can take many specific values, switch is often cleaner than a long else if chain.

Syntax

switch (expression) {
  case value1:
    // code for value1
    break;
  case value2:
    // code for value2
    break;
  default:
    // code if no case matches
}

Real-Life Example

let day = 3;

switch (day) {
  case 1:
    console.log("Monday");
    break;
  case 2:
    console.log("Tuesday");
    break;
  case 3:
    console.log("Wednesday");
    break;
  case 4:
    console.log("Thursday");
    break;
  case 5:
    console.log("Friday");
    break;
  case 6:
    console.log("Saturday");
    break;
  case 7:
    console.log("Sunday");
    break;
  default:
    console.log("Invalid day number.");
}
// Output: Wednesday

⚠️ Why break Matters

Without break, JavaScript falls through to the next case automatically. This can cause bugs:

let day = 2;

switch (day) {
  case 1:
    console.log("Monday");
  case 2:
    console.log("Tuesday");   // ✅ correct
  case 3:
    console.log("Wednesday"); // 😱 also runs! (no break)
}
// Output:
// Tuesday
// Wednesday

Always use break at the end of each case — unless you intentionally want fall-through behavior.

---

5️⃣ switch vs if-else — When to Use Which?

Situation	Use
Checking a range (e.g., marks > 50)	if-else
Checking one variable against many exact values	switch
Complex or compound conditions (e.g., a > 5 && b < 3)	if-else
Menu options, days, months, status codes	switch
Only 2-3 conditions	if-else

Quick Rule of Thumb

• Use switch when you're matching one thing to a list of specific values.

• Use if-else when your conditions involve logic, ranges, or multiple variables.

---

🧪 Assignments — Test Your Understanding!

Try these on your own before checking the answers.

---

Assignment 1: Positive, Negative, or Zero

Write a program that takes a number and prints whether it's positive, negative, or zero.

let number = -7;

if (number > 0) {
  console.log("The number is positive.");
} else if (number < 0) {
  console.log("The number is negative.");
} else {
  console.log("The number is zero.");
}
// Output: The number is negative.

Challenge: Try different values — 0, 42, -3.5. Does your code handle them all correctly?

---

Assignment 2: Day of the Week using switch

Write a program that prints the day name when given a number from 1–7.

let dayNumber = 5;

switch (dayNumber) {
  case 1:
    console.log("Monday");
    break;
  case 2:
    console.log("Tuesday");
    break;
  case 3:
    console.log("Wednesday");
    break;
  case 4:
    console.log("Thursday");
    break;
  case 5:
    console.log("Friday");
    break;
  case 6:
    console.log("Saturday");
    break;
  case 7:
    console.log("Sunday");
    break;
  default:
    console.log("Please enter a number between 1 and 7.");
}
// Output: Friday

Challenge: Add a message for weekdays vs weekends using the switch fall-through technique!

---

Assignment 3: Explain It In Your Own Words

Answer these in your own words (no code needed):

1. What happens if you forget break in a switch statement?

2. Can you use switch to check if a number is greater than 50? Why or why not?

3. What does the default case do in a switch statement?

---

✅ Key Takeaways

• Control flow lets your program make decisions based on conditions.

• if runs code when a condition is true.

• if-else adds a fallback for when the condition is false.

• else if chains let you handle multiple conditions in sequence.

• switch is clean and readable when matching one value against many exact options.

• Always use break in switch to prevent unintended fall-through.

• Choose if-else for ranges and logic; choose switch for exact value matching.

---

Found this helpful? Share it with a fellow learner and drop a reaction below. Questions? Leave them in the comments!