# Control Flow in JavaScript: If, Else, and Switch Explained When you write code, you’re constantly making decisions: * If the user is logged in, show the dashboard. * If the score is above 90, show “A grade”. * If today is Sunday, send a summary email. This “decision-making” is called **control flow**. In this article, we’ll go through: * What does **control flow** mean? * `if`, `if-else`, `else if` ladder * `switch` statement * When to use **switch vs if-else** * Simple, practical examples and assignment ideas ## **What Is Control Flow?** **Control flow** is the order in which your code runs. Normally, JavaScript runs your code **top to bottom**, one line at a time. But with control flow statements, you can say: * “If this condition is true, run this block.” * “Otherwise, run something else.” * “Choose one of many options depending on a value.” This is like real life: * If it’s raining → take an umbrella * Else if it’s cloudy → take a light jacket * Else → no extra gear needed Programming gives you similar tools. ## **The** `if` **Statement** Use `if` when you want to run code **only if a condition is true**. ```javascript if (condition) { // code to run if condition is true } ``` ### **Example: check age** ```javascript const age = 20; if (age >= 18) { console.log("You are an adult."); } ``` * `age >= 18` is the **condition**. * If it’s true, the code inside `{ ... }` runs. * If it’s false, JavaScript **skips** that block. ## **The** `if-else` **Statement** Use `if-else` when you want **two possible paths**: * One if the condition is **true** * Another if it is **false** ### **Syntax** ```javascript if (condition) { // runs if condition is true } else { // runs if condition is false } ``` ### **Example: pass or fail** ```javascript const marks = 45; if (marks >= 40) { console.log("You passed."); } else { console.log("You failed."); } ``` * If `marks` is 40 or more → “You passed.” * Otherwise → “You failed.” This is like: * If you have ₹100 or more → you can buy the item * Else → you cannot buy it * * * ## **The** `else if` **Ladder** Sometimes you have **more than two** possibilities: * Grade A * Grade B * Grade C * Fail The `else if` **ladder** lets you chain multiple conditions. ### **Syntax** ```javascript if (condition1) { // runs if condition1 is true } else if (condition2) { // runs if condition1 is false AND condition2 is true } else if (condition3) { // runs if previous are false AND condition3 is true } else { // runs if none of the above conditions are true } ``` ### **Example: grading system** ```javascript const marks = 78; if (marks >= 90) { console.log("Grade A"); } else if (marks >= 75) { console.log("Grade B"); } else if (marks >= 60) { console.log("Grade C"); } else { console.log("Grade D"); } ``` How it runs step by step: 1. Check `marks >= 90` → 78 >= 90? No → skip. 2. Check `marks >= 75` → 78 >= 75? Yes → print `"Grade B"`. 3. The rest of the ladder is **not checked** once one block matches. This is like: * If marks ≥ 90 → A * Else if ≥ 75 → B * Else if ≥ 60 → C * Else → D Only one block runs. ## **The** `switch` **Statement** `switch` is another way to handle **multiple choices** based on **one value**. Instead of many `if-else` checks on the same variable, `switch` can be cleaner. ### **Syntax** ```javascript switch (expression) { case value1: // code if expression === value1 break; case value2: // code if expression === value2 break; // more cases... default: // code if no case matches } ``` ### **Important:** `break` **in switch** * `break` **stops** the switch from continuing to the next case. * Without `break`, JavaScript will **“fall through”** and run the next case’s code too, which is usually not what you want (at least when starting out). ### **Example: day of the week** ```javascript const dayNumber = 3; let dayName; switch (dayNumber) { case 1: dayName = "Monday"; break; case 2: dayName = "Tuesday"; break; case 3: dayName = "Wednesday"; break; case 4: dayName = "Thursday"; break; case 5: dayName = "Friday"; break; case 6: dayName = "Saturday"; break; case 7: dayName = "Sunday"; break; default: dayName = "Invalid day number"; } console.log(dayName); // "Wednesday" ``` Step by step: 1. `dayNumber` is `3`. 2. `switch` compares it to each `case`: * `1`? No. * `2`? No. * `3`? Yes → run that block. 3. It sets `dayName = "Wednesday";` 4. `break;` tells JavaScript: stop checking further cases. If no `case` matches, the `default` block runs. ## **When to Use** `switch` **vs** `if-else` Both can do similar things, but they **shine in different situations**. ### **Use** `if` **/** `if-else` **/** `else if` **when:** * You have **range-based conditions**: * `marks >= 90` * `temperature < 0` * `age >= 18 && age < 60` * Your conditions are more **complex** than “is it equal to this value?” Example (ranges fit `if-else` better): ```javascript const temperature = 32; if (temperature <= 0) { console.log("Freezing"); } else if (temperature <= 20) { console.log("Cold"); } else if (temperature <= 35) { console.log("Warm"); } else { console.log("Hot"); } ``` ### **Use** `switch` **when:** * You are checking **one variable** against **many possible fixed values**: * Day of week (1–7) * User role (`"admin"`, `"editor"`, `"viewer"`) * Menu choice (`"start"`, `"help"`, `"exit"`) Example (cleaner with `switch`): ```javascript const role = "editor"; switch (role) { case "admin": console.log("Full access"); break; case "editor": console.log("Edit access"); break; case "viewer": console.log("Read-only access"); break; default: console.log("Unknown role"); } ``` **Rule of thumb:** * **Ranges / complex conditions** → `if-else`. * **One value with many discrete options** → `switch`. * * * ## **Assignment 1: Positive, Negative, or Zero** ### **Task** Write a program that checks if a number is: * Positive * Negative * Zero ### **Example using** `if-else` ```javascript const number = 0; 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 use** `if-else`**?** * You’re dealing with **ranges** and comparisons: * `> 0` * `< 0` * `== 0` * This fits `if-else` better than `switch`. * * * ## **Assignment 2: Day of the Week Using** `switch` ### **Task** Write a program that prints the day of the week given a number `1–7`. * `1` → Monday * `2` → Tuesday * ... * `7` → Sunday ### **Example solution** ```javascript const dayNumber = 5; let dayName; switch (dayNumber) { case 1: dayName = "Monday"; break; case 2: dayName = "Tuesday"; break; case 3: dayName = "Wednesday"; break; case 4: dayName = "Thursday"; break; case 5: dayName = "Friday"; break; case 6: dayName = "Saturday"; break; case 7: dayName = "Sunday"; break; default: dayName = "Invalid day number"; } console.log(dayName); ``` **Why use** `switch` **here?** * You’re checking **one variable** (`dayNumber`) against **multiple exact values** (`1` to `7`). * `switch` makes this pattern clean and easy to read. ### **1\. If-Else Flowchart** ```plaintext Start → Check condition: number > 0? Yes → “Positive” → End No → Check number < 0? Yes → “Negative” → End No → “Zero” → End ``` This shows how only **one path** is followed based on conditions. ### **2\. Switch-Case Branching Diagram** ```plaintext Start with dayNumber Arrow to a box: switch(dayNumber) Branches: 1 → “Monday” 2 → “Tuesday” ... 7 → “Sunday” default → “Invalid day” ``` Each branch ends after a `break`, showing that only the matching case runs. ## **Summary** * **Control flow** controls how your program decides **what to run next**. * Use: * `if` for simple “run this only if true”. * `if-else` When there are exactly two paths. * `else if` ladder when there are **multiple ordered conditions** (often ranges). * `switch` When checking **one value** against **many fixed options**. * `break` **in** `switch` stops execution from falling through into the next case. * Choose your control structure based on: * Type of conditions (ranges vs fixed values). * Readability and clarity of your code. *Happy Coding!*