# 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**

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

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

```javascript
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!
```

![](https://cdn.hashnode.com/uploads/covers/696f9f5589255b82f81f6b17/4708911d-ba72-44a2-910a-80911bf16633.png align="center")

## 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**

```javascript
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,

```javascript
let temperature = 35;

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

// Output: Stay at home
```

**Another example**

```javascript
let temperature = 28;

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

// Output: Go outdoors
```

![](https://cdn.hashnode.com/uploads/covers/696f9f5589255b82f81f6b17/febade16-e43d-4e00-9b47-1f0a169cc897.png align="center")

## 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**

```javascript
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.

```javascript
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**

```javascript
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**

```javascript
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**

```javascript
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**

```javascript
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**

![](https://cdn.hashnode.com/uploads/covers/696f9f5589255b82f81f6b17/3527e835-f87d-4ab6-a087-84f1a1c510bd.png align="center")

### **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:

```javascript
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."*