Mastering Control Flow in JavaScript: if-else vs switch-case

by

When writing JavaScript code, it executes line by line from start to finish. But what if we need to make decisions based on certain conditions? That’s where control flow comes in!

Control flow allows us to alter the execution path of our code, ensuring that only specific blocks run based on given conditions. The two main ways to achieve this in JavaScript are:

🔹 if-else statements – Best for handling complex conditions.
🔹 switch-case statements – Best for checking a variable against multiple fixed values.

📌 Understanding if-else

The if statement executes a block of code only when a condition is true. If the condition is false, we can use else to execute an alternative block.

✅ Example 1: Basic if-else


  let catchingBus = true;

  if (catchingBus) {
      console.log("I will get home on time");
  } else {
      console.log("I will be late to get home");
  }

📝 Here, if catchingBus is true, the first block runs. Otherwise, the else block executes.

✅ Example 2: Handling multiple conditions with if-else

Let’s say we need to determine a student’s grade based on their score:


let score = 76;

if (score >= 90) {
    console.log("Grade A");
} else if (score >= 80) {
    console.log("Grade B");
} else if (score >= 70) {
    console.log("Grade C");
} else {
    console.log("Fail");
}

💡 When to use if-else?
✔ When checking range-based conditions (e.g., scores, age, temperature).
✔ When conditions involve logical operators (&&, ||).
✔ When different conditions require different operations.

📌 Understanding switch-case

The switch statement is a great alternative when checking a single variable against multiple values. It improves readability and can be faster than multiple if-else checks.

✅ Example 3: switch-case in action


let position = 3;

switch (position) {
    case 1:
        console.log("Gold Medal 🥇");
        break;
    case 2:
        console.log("Silver Medal 🥈");
        break;
    case 3:
        console.log("Bronze Medal 🥉");
        break;
    default:
        console.log("No medal, better luck next time! 😢");
}

🔹 Why use switch-case?
✔ When checking a single value against multiple fixed cases.
✔ When readability is a concern (avoids excessive if-else chains).
✔ When performance matters (some JavaScript engines optimize switch statements).

⚡ Performance Tip: JavaScript engines optimize switch-case by using a jump table, which allows it to skip unnecessary checks and directly execute the matching case.

🆚 Comparison: if-else vs switch-case

Feature if-else switch-case
Condition Type Complex conditions, ranges Fixed values (exact matches)
Readability Becomes harder with multiple conditions Easier to read with multiple cases
Performance Slower with many checks Can be optimized with jump tables

💡 Final Thoughts

🔹 Use if-else for complex logic and range-based conditions.
🔹 Use switch-case when comparing a variable against multiple fixed values.
🔹 Too many if-else statements can slow down execution, while switch-case can improve performance in some cases.

👉 What’s your preferred choice: if-else or switch-case? Let’s discuss in the comments! 👇

Leave a comment