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

## Introduction

Imagine deciding what to watch on Netflix in the evening today. if you're tired from work, you choose a comedy. if you want something more serious, an action drama. This process of making decisions is exactly what control flow does in programming. It lets your code make decisions and choose different paths based on conditions.

## What is Control Flow ?

Control flow determines the order in which code executes. It allows programs to make decisions, skip code blocks, and execute different actions based on conditions like a flowchart with decision points.

* * *

## The If Statement

The `if` statement executes code only if a condition is true.

**Syntax:**

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

**Example:**

```javascript
let age = 20;

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

> **How it works:** JavaScript checks if `age >= 18` is true. If yes, the code runs. If false, it skips the block.

* * *

## The `if-else` Statement

Use `else` to execute different code when the condition is false.

**Example:**

```javascript
let marks = 35;

if (marks >= 40) {
  console.log("You passed!");
} else {
  console.log("You failed. Better luck next time!");
}
```

![](https://cdn.hashnode.com/uploads/covers/694fec52c1f007f2b5f42ed3/10aee0ea-b33e-4728-baff-6463c9f0a0d9.png align="center")

* * *

## The `else if` Ladder

Chain multiple conditions together to check them in sequence.

**Example:**

```javascript
let marks = 75;

if (marks >= 90) {
  console.log("Grade: A+");
} else if (marks >= 80) {
  console.log("Grade: A");
} else if (marks >= 70) {
  console.log("Grade: B");
} else if (marks >= 60) {
  console.log("Grade: C");
} else {
  console.log("Grade: F");
}
```

**Output:** `Grade: B`

**Key Points:**

*   Conditions are checked top to bottom
    
*   First true condition executes, rest are skipped
    
*   `else` runs only if all conditions are false
    

* * *

## The `switch` Statement

The `switch` statement compares one variable against multiple exact values.

**Syntax:**

```javascript
switch (expression) {
  case value1:
    // Code
    break;
  case value2:
    // Code
    break;
  default:
    // Code if no match
}
```

**Example:**

```javascript
let dayNumber = 3;

switch (dayNumber) {
  case 1:
    console.log("Monday");
    break;
  case 2:
    console.log("Tuesday");
    break;
  case 3:
    console.log("Wednesday");
    break;
  default:
    console.log("Invalid day");
}
```

**Output:** `Wednesday`

* * *

## Understanding `break`

The `break` keyword stops execution and exits the switch. Without it, JavaScript continues to execute all cases below called **fall-through**.

**Without break:**

```javascript
let fruit = "apple";

switch (fruit) {
  case "apple":
    console.log("It's an apple!");
  case "banana":
    console.log("It's a banana!");
}
```

**Output:**  
`It's an apple!`  
`It's a banana!`

**With break:**

```javascript
switch (fruit) {
  case "apple":
    console.log("It's an apple!");
    break;
  case "banana":
    console.log("It's a banana!");
    break;
}
```

**Output:** `It's an apple!`

* * *

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

**Use** `if-else` **when:**

*   Checking ranges: `if (temperature > 30)`
    
*   Complex conditions: `if (age >= 18 && hasID)`
    
*   Different comparisons per condition
    

**Use** `switch` **when:**

*   Comparing one variable against multiple exact values
    
*   You have 3+ specific options to check
    
*   Code readability improves with switch
    

**Quick Comparison:**

| Feature | `if-else` | `switch` |
| --- | --- | --- |
| Best for | Ranges, complex logic | Exact matches |
| Operators | Any (`>`, `<`, `&&`) | Only equality |
| Readability | Good for 2-4 conditions | Better for 5+ options |

* * *

## Practice Examples

### Example 1: Positive, Negative, or Zero

```javascript
let number = -5;

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

**Why** `if-else`**?** We're checking ranges (`>`, `<`), not exact values.

* * *

### Example 2: Day of the Week

```javascript
let dayNumber = 5;

switch (dayNumber) {
  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");
}
```

**Why** `switch`**?** Comparing one variable against multiple exact values.

* * *

## Key Takeaways

*   **Control flow** lets programs make decisions
    
*   `if` executes code when a condition is true
    
*   `if-else` chooses between two paths
    
*   `else if` checks multiple conditions in order
    
*   `switch` compares one variable against many values
    
*   `break` prevents fall-through in switch statements
    
*   Use `if-else` for ranges and complex logic; use `switch` for exact matches