Control Flow in JavaScript: If, Else, and Switch Explained
Every single day, we make decisions. If it's raining, we carry an umbrella. If the chai is too hot, we wait. If it's a holiday, we sleep in. We are constantly checking conditions and choosing what to do based on the result.
Our code works the same way. Control flow is just the order in which our program makes decisions and executes code. And the tools JavaScript gives us for that are if, else, and switch.
The if Statement
The if statement is the simplest form of decision making in JavaScript. It says: if this condition is true, run this block of code.
let marks = 75;
if (marks >= 50) {
console.log("Passed!");
}
// Output: Passed!
JavaScript checks the condition inside the parentheses. If it evaluates to true, the code inside the curly braces runs. If it is false, JavaScript skips that block entirely and moves on.
The if-else Statement
What if we want something to happen when the condition is false as well? That is where else comes in.
let marks = 35;
if (marks >= 50) {
console.log("Passed!");
} else {
console.log("Failed. Try again.");
}
// Output: Failed. Try again.
Think of it like this. We are at a gate. If we have a ticket, we get in. If we do not have a ticket, we are turned away. One condition, two possible outcomes.
The else if Ladder
Sometimes two options are not enough. What if we want to check multiple conditions one after another? We use else if to build a ladder.
let marks = 72;
if (marks >= 90) {
console.log("Grade: A");
} else if (marks >= 75) {
console.log("Grade: B");
} else if (marks >= 60) {
console.log("Grade: C");
} else {
console.log("Grade: F");
}
// Output: Grade: C
JavaScript goes through each condition from top to bottom. The moment it finds one that is true, it runs that block and skips everything else. If none of the conditions match, the final else acts as the fallback.
The switch Statement
Now imagine we have one variable and we want to check it against many specific values. We could write a long else ifladder, but there is a cleaner way for situations like this.
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;
default:
console.log("Another day");
}
// Output: Wednesday
The switch statement takes a value and compares it against each case. When it finds a match, it runs that block of code.
Now notice the break keyword after each case. That is important. Without break, JavaScript does not stop after finding a match. It keeps running every case below it until it hits the end of the switch block. That behaviour is called fall-through and it causes bugs if we are not careful.
The default at the bottom is like the else in an if-else chain. It runs when none of the cases match.
When to Use switch vs if-else
Both do the job of decision making, but they suit different situations.
if-else is more flexible. We can check ranges, compare two different variables, or write any kind of condition inside it. When the logic is complex or the conditions are not simple equality checks, if-else is the right pick.
let age = 20;
let hasID = true;
if (age >= 18 && hasID) {
console.log("Entry allowed");
} else {
console.log("Entry not allowed");
}
switch works best when we are comparing one variable against a list of fixed, specific values. It reads more cleanly in those situations and is easier to scan through.
let plan = "pro";
switch (plan) {
case "free":
console.log("You have 5GB storage");
break;
case "basic":
console.log("You have 20GB storage");
break;
case "pro":
console.log("You have 100GB storage");
break;
default:
console.log("Unknown plan");
}
// Output: You have 100GB storage
A simple way to decide: if the condition is about checking a range or combining multiple variables, go with if-else. If we are checking one variable against a bunch of specific values, switch keeps things neat.
