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

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

Think about everyday situations:

*   If it is raining, you take an umbrella.
    
*   If your exam score is high, you feel happy.
    
*   If today is Sunday, you might relax at home.
    

Our decisions depend on conditions, and programming works in the same way.

In JavaScript, **control flow** allows a program to decide **which piece of code should run based on certain conditions**. Without control flow, a program would simply run line by line without any decision-making.

In this article, we will understand some of the most important control flow structures in JavaScript:

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

Let’s begin with the basics.

* * *

# What Control Flow Means in Programming

Control flow simply refers to **the order in which the code executes**.

Normally, JavaScript executes code from **top to bottom**. But often we want the program to behave differently depending on a condition.

For example:

*   If a person is above 18, allow voting
    
*   If marks are above 90, print “Excellent”
    
*   If the day is Monday, show “Start of the week”
    

Instead of running every line, the program checks a condition and decides what should happen next.

That decision-making process is called **control flow**.

* * *

# Why Control Flow Is Important

Control flow allows programs to become **interactive and intelligent**.

Without it, every program would behave exactly the same regardless of input.

For example, imagine a login system:

*   If the password is correct → allow login
    
*   If the password is wrong → show an error
    

This logic would not be possible without control flow.

Control flow helps us:

*   respond to different inputs
    
*   implement logical decisions
    
*   control program behavior
    
*   make applications dynamic
    

* * *

# The `if` Statement

The `if` statement is the simplest form of decision-making in JavaScript.

It tells the program:

> “Run this block of code only if the 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 an adult.");
}
```

### How it works

1.  JavaScript checks the condition `age >= 18`
    
2.  Since the condition is **true**, the code inside the block runs.
    

Output:

```plaintext
You are an adult.
```

If the condition were false, the code inside the `if` block would simply be skipped.

* * *

# The `if...else` Statement

![](https://cdn.hashnode.com/uploads/covers/696a3cd3f0b435e59823a2c4/6dfa4bbd-5d71-40a8-849c-2f9f905a5c39.png align="center")

Sometimes we want the program to do one thing if the condition is true and another thing if it is false.

That is where `if...else` is useful.

### Syntax

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

### Example

```javascript
let age = 16;

if (age >= 18) {
  console.log("You can vote.");
} else {
  console.log("You cannot vote yet.");
}
```

### How it works

1.  JavaScript checks the condition.
    
2.  If the condition is true → `if` block runs.
    
3.  If the condition is false → `else` block runs.
    

Output:

```plaintext
You cannot vote yet.
```

* * *

# The `else if` Ladder

![](https://cdn.hashnode.com/uploads/covers/696a3cd3f0b435e59823a2c4/19bed232-e3d1-436f-9336-63400bdd1f76.png align="center")

In real situations, we often have **multiple conditions**, not just two.

For example, grading a student’s marks:

*   Above 90 → Excellent
    
*   Above 75 → Very Good
    
*   Above 50 → Pass
    
*   Below 50 → Fail
    

To handle multiple conditions, we use an **else if ladder**.

### Syntax

```javascript
if (condition1) {
  // code
} else if (condition2) {
  // code
} else if (condition3) {
  // code
} else {
  // code
}
```

### Example

```javascript
let marks = 82;

if (marks >= 90) {
  console.log("Excellent");
} else if (marks >= 75) {
  console.log("Very Good");
} else if (marks >= 50) {
  console.log("Pass");
} else {
  console.log("Fail");
}
```

### Execution

JavaScript checks each condition **from top to bottom**.

Once a condition becomes true:

*   That block runs
    
*   The rest are skipped
    

Output:

```plaintext
Very Good
```

* * *

# The `switch` Statement

![](https://cdn.hashnode.com/uploads/covers/696a3cd3f0b435e59823a2c4/97fcdc61-c85e-4e31-8164-439652a9660f.png align="center")

The `switch` statement is another way to make decisions in JavaScript.

It is useful when we want to compare **one value against many possible fixed values**.

For example:

*   day number → day name
    
*   menu option → selected item
    
*   month number → month name
    

### Syntax

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

  case value2:
    // code
    break;

  default:
    // code
}
```

* * *

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

Output:

```plaintext
Wednesday
```

* * *

# Why `break` Is Important

The `break` statement stops the switch once a match is found.

Without `break`, JavaScript continues executing the next cases as well. This is called **fall-through behavior**.

Example without `break`:

```javascript
let day = 2;

switch (day) {
  case 2:
    console.log("Tuesday");

  case 3:
    console.log("Wednesday");

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

Output:

```plaintext
Tuesday
Wednesday
Invalid day
```

This happens because the switch does not stop after the first match.

Using `break` prevents this issue.

* * *

# `default` Case in Switch

The `default` block runs when **none of the cases match**.

It works similarly to the `else` block in an `if...else` statement.

Example:

```javascript
let color = "blue";

switch (color) {
  case "red":
    console.log("Stop");
    break;

  case "green":
    console.log("Go");
    break;

  case "yellow":
    console.log("Wait");
    break;

  default:
    console.log("Unknown color");
}
```

Output:

```plaintext
Unknown color
```

* * *

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

Both structures are useful, but each works better in different situations.

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

*   You are checking **ranges**
    
*   You have **complex conditions**
    
*   You use logical operators like `&&` or `||`
    

Example:

```javascript
let temperature = 35;

if (temperature > 30) {
  console.log("It is hot.");
} else {
  console.log("It is not too hot.");
}
```

* * *

### Use `switch` when:

*   You are comparing **one value**
    
*   The values are **fixed and exact**
    
*   You want cleaner code instead of many `else if` blocks
    

Example:

```javascript
let fruit = "apple";

switch (fruit) {
  case "apple":
    console.log("Apple selected");
    break;

  case "banana":
    console.log("Banana selected");
    break;

  case "mango":
    console.log("Mango selected");
    break;

  default:
    console.log("Fruit not found");
}
```

* * *

# Assignment Practice

Here are the two programs mentioned in the assignment.

* * *

## Program 1: Check Whether a Number Is Positive, Negative, or Zero

```javascript
let number = -5;

if (number > 0) {
  console.log("The number is positive.");
} else if (number < 0) {
  console.log("The number is negative.");
} else {
  console.log("The number is zero.");
}
```

### Why `if...else` was used

Because we are checking **logical conditions** rather than exact values.

* * *

## Program 2: Print the Day of the Week Using `switch`

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

### Why `switch` was used

Because the day values are **fixed numbers**, which makes `switch` a cleaner option.

* * *

# Final Thoughts

Control flow is one of the most important concepts in JavaScript.

It allows programs to **make decisions and respond to different situations** instead of running every line blindly.

To summarize:

*   `if` → run code only when a condition is true
    
*   `if...else` → choose between two paths
    
*   `else if` → choose between multiple conditions
    
*   `switch` → choose between multiple fixed values
    

Once you are comfortable with these concepts, writing logical programs becomes much easier.

The best way to learn control flow is simple: **practice with small examples** like numbers, marks, age, and days of the week.

With consistent practice, these decision structures will become second nature.