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

When writing programs, we often need to make decisions.

For example:

*   If it's raining -> take an umbrella
    
*   If age >= 18 -> allow voting
    
*   If marks >= 90 -> grade A
    

This decision making process in programming is called: **Control Flow**

## **What Does Control Flow Mean?**

Control flow decides:

> ***Which part of the code runs and when.***

Normally JavaScript runs code from top to bottom.

But with control flow:

*   Code can be skipped
    
*   Code can be branched
    
*   Code can choose different paths
    

Think of it like a traffic signal.  
It controls which direction moves forward.

## **The** `If` **Statement**

The `if` statement runs code only if the condition is true.

**Syntax:**

```javascript
if(condition) {
    //Code runs if the condition is true
}
```

**Example: Checking age**

```javascript
let age = 20;

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

**Step-by-Step Execution:**

1.  `age` is assigned the value 20.
    
2.  JavaScript checks: whether `age >= 18`.
    
3.  Condition is `true`
    
4.  Code inside `{}` runs.
    

**Output**

```plaintext
You are eligible to vote.
```

## **The** `if-else` **Statement**

Sometimes we want

*   One block if true
    
*   Another block for false
    

we use `if-else` .

![](https://cdn.hashnode.com/uploads/covers/6960d4a8e73a7c4653bc6b00/0b02bead-0fae-46ed-9f2b-456045a11416.png align="center")

**Syntax:**

```javascript
if(condition) {
    //Code runs if condition is true.
} else {
    //Code runs if condition is false.
}
```

**Example: Pass or Fail**

```javascript
let marks = 45;

if(marks >= 50) {
    console.log("You Passed");
} else {
    console.log("You Failed.");
}
```

**Step-by-Step Execution:**

*   marks = 45
    
*   Check: 45 >= 50 -> false
    
*   Skip `if` block
    
*   Run `else` block
    

**Output:**

```plaintext
You Failed.
```

## **The** `else-if` **Ladder**

Used when we have multiple conditions.

**Syntax:**

```javascript
if(condition1) {
    
} else if(condition2) {

} else {

}
```

**Example: Grading System**

```javascript
let marks = 75;

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

**Step-by-Step Execution:**

If `marks = 75`

1.  Check `75 >= 90` --> false
    
2.  Check `75 >= 70` -->true
    
3.  Print `"Grade B"`
    
4.  Stop Checking further condition
    

**Important:** Once the condition is true, the rest are skipped.

## **The** `switch` **Statement**

The `switch` statement is used when we want to compare one value against many possible fixed values.

**Syntax:**

```javascript
switch(expression) {
    case value1:
        //code
        break;
    case value2:
        //code
        break;
    default:
        //code
}
```

**Example: Day of the week**

```javascript
let day = 2;

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");
}
```

**Step-by-Step Execution**

If `day = 2`

1.  Compare with case 1 --> false
    
2.  Compare with case 2 --> true
    
3.  Print `"Tuesday"`
    
4.  `break` stops execution
    
5.  Exit switch
    

![](https://cdn.hashnode.com/uploads/covers/6960d4a8e73a7c4653bc6b00/67642e3e-4f23-4bb5-95b6-f51d3b3ec8e5.png align="center")

### **Why** `break` **is Important:**

If we remove `break` , JavaScript continues running the next cases.

**Example without break:**

```javascript
case 2:
    console.log("Tuesday");
case 3:
    console.log("Wednesday");
```

**Output would be:**

```plaintext
Tuesday
Wednesday
```

This is called **fall-through behavior**.  
Always use `break` unless you intentionally want fall through.

## **When to Use** `switch` **vs** `if-else`

| **Use** `if-else` **when** | **Use** `switch` **when** |
| --- | --- |
| Checking ranges (age > 18) | Comparing one value |
| Complex Conditions | Fixed known values |
| Logical Expression | Menu option |

### **Real Life Decision Example**

Imagine:

*   If temperature > 35 --> "Very Hot"
    
*   If temperature > 20 --> "Warm"
    
*   Else --> "Cold"
    

That's perfect for `if-else` .

But:

*   If role is "admin"
    
*   If role is "user"
    
*   If role is "guest"
    

That's better for switch.

## **Assignment Ideas**

**Check Position, Negative or Zero.** (Try to do it on your own first.)

```javascript
let number = -5;

if(number > 0) {
    console.log("Positive");
} else if(number < 0) {
    console.log("Negative");
} else {
    console.log("Zero");
}
```

**Print Day of the week Using** `switch`

```javascript
let day = 4;

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");
}
```

## **Final Thoughts**

Control flow is the backbone of programming logic.

By understanding:

*   `if`
    
*   `if-else`
    
*   `if-else if-else`
    
*   `switch`
    

We can build programs that can make decisions like us.