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

Programming is not just about writing instructions — it’s about **making decisions**.

In real life, we constantly evaluate conditions:

*   *If it is raining, take an umbrella.*
    
*   *If the traffic is heavy, leave early.*
    
*   *If marks are above 90, grade is A.*
    

Programs behave the same way. They must **choose different paths depending on conditions**.

This concept is called **control flow**.

## What is Control Flow?

**Control flow determines the order in which code executes.**

Without control flow, a program would simply run line by line with no decision making.

Example:

```javascript
console.log("Program started");
console.log("Checking condition...");
console.log("Program ended");
```

This runs sequentially.

But real programs require decisions like:

*   Login success or failure
    
*   User age verification
    
*   Payment success or failure
    
*   Feature access control
    

JavaScript provides multiple structures to control this flow.

The most common ones are:

*   `if`
    
*   `if...else`
    
*   `else if`
    
*   `switch`
    

## The `if` Statement

The **if statement executes code only when 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

1.  JavaScript evaluates the condition.
    
2.  If the condition is `true`, the block executes.
    
3.  If it is `false`, the block is skipped.
    

## Decision Flow Diagram

![](https://cdn.hashnode.com/uploads/covers/69517129b3f42beb72514f64/047c4d1e-5cc9-44e3-8e2a-d86fad65fb9a.png align="center")

The program checks a condition and decides **whether to execute the block or skip it**.

## The `if...else` Statement

Sometimes we want **two possible outcomes**.

Example:

*   If age ≥ 18 → allow voting
    
*   Otherwise → deny access
    

This is where **if...else** is used.

### Syntax

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

### Example

```javascript
let age = 16;

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

### Execution

JavaScript will run **only one block**.

## The `else if` Ladder

What if there are **multiple conditions**?

Example:

Grading system:

*   90+ → Grade A
    
*   75+ → Grade B
    
*   50+ → Grade C
    
*   Below 50 → Fail
    

### Syntax

```javascript
if (condition1) {

} else if (condition2) {

} else if (condition3) {

} else {

}
```

### Example

```javascript
let marks = 82;

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

### Important Behavior

JavaScript checks conditions **from top to bottom**.

Once a condition becomes **true**, the remaining conditions are skipped.

## The `switch` Statement

When we need to compare **one value against many possible values**, `switch` can be cleaner than many `if...else` statements.

### Syntax

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

  case value2:
    // code
    break;

  default:
    // fallback
}
```

## Switch Case Flow Diagram

![](https://cdn.hashnode.com/uploads/covers/69517129b3f42beb72514f64/b9641fff-4591-4114-b649-f6bdbd3a245d.png align="center")

Instead of checking conditions repeatedly, the program **jumps directly to the matching case**.

## Example: Day of the Week

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

  case 5:
    console.log("Friday");
    break;

  case 6:
    console.log("Saturday");
    break;

  case 7:
    console.log("Sunday");
    break;

  default:
    console.log("Invalid day");
}
```

### Why `break` is important

Without `break`, JavaScript continues executing the next cases.

Example:

```plaintext
case 1:
  console.log("Monday");

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

If `day = 1`, output becomes:

```plaintext
Monday
Tuesday
```

This behavior is called **fall-through**.

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

### Use `if...else` when

*   Conditions involve **ranges**
    
*   Logical operators are used (`&&`, `||`)
    
*   Comparisons are complex
    

Example:

```javascript
if (age >= 18 && age < 60)
```

### Use `switch` when

*   Comparing **one variable**
    
*   Checking **multiple exact values**
    
*   Code readability matters
    

Example:

```javascript
switch(day)
```

# Assignment Programs

## Program 1: Check Positive, Negative, or Zero

Here we use **if...else if** because the conditions involve **numeric comparison**.

```javascript
let num = -5;

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

### Why `if...else`?

Because the program must check **numeric conditions** (`>`, `<`, `===`).

## Program 2: Print Day of Week

Here we use **switch** because the program compares **one variable against many values**.

```javascript
let day = 5;

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