# Control Flow in JavaScript: How Your Code Makes Decisions

Every day, you make countless decisions. **If** it’s raining, you take an umbrella. **Else if** it’s sunny, you wear sunglasses. **Else**, you just walk out as you are.

In programming, this is known as **Control Flow**. By default, JavaScript runs code line-by-line from top to bottom. Control flow structures allow your program to "break" that straight line, skipping sections of code or choosing different paths based on specific conditions.

* * *

## **1\. The** `if` **Statement: The Basic Check**

The `if` statement is the most fundamental way to control code. It tells JavaScript: "Only run this block of code **if** the condition inside the parentheses is true."

```javascript
let age = 20;

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

If the condition is `false`, JavaScript simply skips over everything inside the curly braces `{}` and moves to the next line of code.

* * *

## **2\. The** `if-else` **Statement: Handling Alternatives**

Sometimes you want to do one thing if a condition is true, and a *different* thing if it's false. This is where the `else` block comes in.

```javascript
let marks = 45;

if (marks >= 50) {
  console.log("Result: Pass");
} else {
  console.log("Result: Fail");
}
```

Think of this as a fork in the road. You must take exactly one path—either the `if` path or the `else` path.

![](https://cdn.hashnode.com/uploads/covers/695a275cee3d7756437f49db/6855e85b-f8b5-4d86-a385-597b1aa6f650.png align="center")

* * *

## **3\. The** `else if` **Ladder: Multiple Options**

What if you have more than two possibilities? For example, grading a student (A, B, C, or F). An `else if` ladder allows you to check multiple conditions in order.

```javascript
let score = 85;

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

JavaScript checks these from top to bottom. As soon as it finds a true condition, it runs that block and **ignores the rest** of the ladder.

* * *

## **4\. The** `switch` **Statement: The Multi-Way Branch**

When you are checking a single variable against many specific "fixed" values (like days of the week or menu items), an `else if` ladder can get messy. The `switch` statement provides a cleaner, more organized syntax.

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

![](https://cdn.hashnode.com/uploads/covers/695a275cee3d7756437f49db/6157fdd8-fae2-454f-9958-ca8ac347027b.png align="center")

### **The Role of** `break`

The `break` keyword is essential. It tells JavaScript to "break out" of the switch once a match is found. Without it, the code will "fall through" and execute every case below the match, regardless of whether they are true!

* * *

## **5\. When to use** `switch` **vs.** `if-else`

Both tools do similar things, but they excel in different areas:

<table style="min-width: 50px;"><colgroup><col style="min-width: 25px;"><col style="min-width: 25px;"></colgroup><tbody><tr><td colspan="1" rowspan="1"><p><strong>Use </strong><code>if-else</code><strong> when...</strong></p></td><td colspan="1" rowspan="1"><p><strong>Use </strong><code>switch</code><strong> when...</strong></p></td></tr><tr><td colspan="1" rowspan="1"><p>You are checking <strong>ranges</strong> (e.g., <code>score &gt; 90</code>).</p></td><td colspan="1" rowspan="1"><p>You are checking <strong>discrete values</strong> (e.g., <code>day === 1</code>).</p></td></tr><tr><td colspan="1" rowspan="1"><p>You have <strong>complex logic</strong> with <code>&amp;&amp;</code> (AND) or `</p></td><td colspan="1" rowspan="1"><p></p></td></tr><tr><td colspan="1" rowspan="1"><p>Your conditions involve different variables.</p></td><td colspan="1" rowspan="1"><p>You want a cleaner, more readable "menu-style" structure.</p></td></tr></tbody></table>

* * *

## **Summary**

Control flow is the "brain" of your script. By mastering `if`, `else`, and `switch`, you transform your code from a static list of instructions into a dynamic program capable of handling real-world logic.