Control Flow in JavaScript: If, Else, and Switch Explained

What does control flow mean in programming

Imagine you want to buy a T-shirt at a mall. You go to the clothing section and pick up a T-shirt. Let’s say your size is M. The first thing you do is check the label. If the size matches yours, keep it. If not, you put it back and look for another one.

After that, you go to the billing counter and ask about the price and whether there is any discount available. The cashier tells you that there is a 10% discount on that T-shirt. If there is a discount, you reduce that amount from the MRP and calculate the final price.

Then you give cash to the cashier. The cashier checks whether the money you gave is equal to or more than the required amount.

If you notice carefully, in every step, you are checking some condition:
Is the T-shirt my size?
Is there any discount available?
Is the cash enough to pay?

Programming works in a very similar way. In programming, the flow of the program depends on conditions. If a condition is true, the code runs. If it is not true, the program either skips that part or runs some other code.

For example, in applications, we often check things like:
Is the user logged in?
Has the user purchased the course?
Is the user's age greater than 17?

JavaScript gives us several tools to control this flow. For example, the most important ones are the if, else, and switch statements — and that's exactly what we'll master today.

The if StatementIt

If is the simplest for decision-making. It says if true, condition runs; otherwise, avoid that code block.

Syntax

if(condition){
 // Your code (Logic)
};

For example, if the t-shirt is under budget, take it home; otherwise.

const isUnderBudget = true;

if( isUnderBudget ){
    console.log("T-shirt bought and")
}

console.log(" Going to home!")

// ==================
// Out put T-shirt bought and
// Going to home!
// ==================
// if const isUnderBudget = false;
// Output Going to home!

The if-else statement

The if-else works the same as if, but it has an option: if the condition is not satisfied, then the else code block runs. In this, if the condition is true, run that part of the code; if false or anything else, run the default part of the code.

Syntax

if(codition){
// code block if condition true
}else{
// default code if condition false
};

For example, if the weather is more than 32 degrees, live at home, else go outdoors,

let temperature = 35;

if (temperature > 32) {
  console.log("Stay at home");
} else {
  console.log("Go outdoors");
}

// Output: Stay at home

Another example

let temperature = 28;

if (temperature > 32) {
  console.log("Stay at home");
} else {
  console.log("Go outdoors");
}

// Output: Go outdoors

The else if ladder

When you need to check more than one condition, you can use else if. First, the if statement checks a condition. If the condition is true, the code inside the if block runs. If the condition is false, the program moves to the else if statement and checks the next condition. If that condition is true, the code inside the else if block runs. If none of the conditions are true, the code inside the else block runs as the default case.

Syntax

if (condition) {
// If block code
}else if (condition){
// else if block code
}else{
// else default code 
};

example

Let a person log in to a service and check if the user is an admin. If the user has admin access, grant admin access; if not, check the role. If the role is the same as the user, grant user access. If not, he has no access.

let role = "user" ;

if (role === "admin"  ) {
  console.log("Admin Access")
    }else if (role === "user" ){
        console.log("User Access")
    } else {
    console.log("No! Access")
   }

// output: Admin Access

Else if code block

let role = "admin";

 if (role === "admin" ) {
 console.log("Admin Access") 
}else if (role === "user" ){
 console.log("User Access") 
} else { 
console.log("No! Access")
 }

// output: User Access

Else code block

let role = undefined;

 if (role === "admin" ) {
 console.log("Admin Access") 
}else if (role === "user" ){
 console.log("User Access") 
} else { 
console.log("No! Access")
 }

// output: No! AccessThe switch statement

The switch statement

The switch The statement is designed for a different situation: when you want to compare one value against several fixed options. Instead of writing many else if lines, you write clean, labeled case blocks.

syntax

switch (expression) {
  case value1:
    // runs when expression === value1
    break;
  case value2:
    // runs when expression === value2
    break;
  default:
    // runs when no case matches
}

What is break? Without it, JavaScript will "fall through" — it'll keep running the next cases even after a match. The break says: "I found my match, now exit the switch."

Example — Day of the Week

let day = 3;

switch (day) {
  case 1:
    console.log("Monday — Start of the week!");
    break;
  case 2:
    console.log("Tuesday — Keep going!");
    break;
  case 3:
    console.log("Wednesday — Halfway there!");
    break;
  case 4:
    console.log("Thursday — Almost Friday!");
    break;
  case 5:
    console.log("Friday — Weekend is near!");
    break;
  case 6:
    console.log("Saturday — Enjoy your day off!");
    break;
  case 7:
    console.log("Sunday — Rest and recharge.");
    break;
  default:
    console.log("Invalid day number!");
}

/*
Output

Wednesday — Halfway there!
*/

Diagram

What happens without break?

This is a very common mistake for beginners. If you remove break, the code "falls through" into the next case regardless of whether it matches:

let day = 3;

switch (day) {
  case 3:
    console.log("Wednesday");  // ← no break!
  case 4:
    console.log("Thursday");   // this runs too!
    break;
}

/*
Output

Wednesday
Thursday
*/

Always add break after each case unless you intentionally want fall-through behaviour.

Switch vs if-else: When to Use Which?

Situation	Best choice	Why
Checking a range (age > 18, marks >= 60)	if / else if	switch cannot handle ranges — only exact values
Matching a single value against many options	switch	Cleaner, more readable, easier to extend
Complex, combined conditions (age > 18 AND isStudent)	if / else if	switch only evaluates one expression at a time
Menu selections, day names, status codes	switch	Each menu item is an exact value — perfect fit
Only 2 outcomes needed	if / else	Simpler and more direct for binary decisions
Checking multiple values that should do the same thing	switch	You can group cases together with fall-through intentionally

Quick rule of thumb

"Use switch when you have one thing with many exact values to compare (like a day number or a menu choice). Use if-else when your conditions involve comparisons, ranges, or multiple variables."