# Control Flow in JavaScript: If, Else, and Switch Explained Programming is all about making decisions. Real life works the same way. For example: * If it’s raining → carry an umbrella * If marks are above 40 → pass * If traffic is heavy → take another route Programs also need to make decisions based on conditions. That’s where **control flow** comes in. Control flow allows JavaScript to decide: * Which code should run * Which code should be skipped In this blog, you’ll learn: * What control flow means * `if` statements * `if-else` * `else if` * `switch` * When to use `switch` vs `if-else` * * * # What Is Control Flow? Control flow means: > The order in which code executes. Normally, JavaScript runs code: * From top to bottom Example: ```javascript console.log("Step 1"); console.log("Step 2"); console.log("Step 3"); ``` Output: ```text Step 1 Step 2 Step 3 ``` But sometimes we want: * Different code to run under different conditions That’s what control flow statements do. * * * # Real-Life Decision Example Imagine checking age for voting. Rules: * If age is 18 or more → eligible * Otherwise → not eligible The program must make a decision. * * * # The `if` Statement The `if` statement runs code only when a condition is true. * * * # Basic Syntax ```javascript if (condition) { // code runs if condition is true } ``` * * * # Example: Age Check ```javascript let age = 20; if (age >= 18) { console.log("You can vote"); } ``` ## Output ```text You can vote ``` * * * # Step-by-Step Execution ```text age = 20 Check: 20 >= 18 Condition is true ↓ Code runs ``` * * * # What If the Condition Is False? ```javascript let age = 15; if (age >= 18) { console.log("You can vote"); } ``` Nothing prints. Because: * The condition is false * * * # Flowchart of `if` Decision-Making ```text Condition Check ↓ Is it true? / \ Yes No ↓ ↓ Run Code Skip Code ``` * * * # The `if-else` Statement Sometimes we want: * One block if condition is true * Another block if condition is false That’s where `if-else` is used. * * * # Syntax ```javascript if (condition) { // runs if true } else { // runs if false } ``` * * * # Example: Pass or Fail ```javascript let marks = 35; if (marks >= 40) { console.log("Pass"); } else { console.log("Fail"); } ``` ## Output ```text Fail ``` * * * # Step-by-Step Execution ```text marks = 35 Check: 35 >= 40 Condition is false ↓ else block runs ``` * * * # Why `if-else` Is Useful It guarantees: * One of the two blocks will execute * * * # The `else if` Ladder Sometimes there are multiple conditions. Example: * A grade system Rules: * 90+ → Grade A * 75+ → Grade B * 40+ → Pass * Otherwise → Fail This is where `else if` helps. * * * # Syntax ```javascript if (condition1) { } else if (condition2) { } else if (condition3) { } else { } ``` * * * # Example: Grade System ```javascript let marks = 82; if (marks >= 90) { console.log("Grade A"); } else if (marks >= 75) { console.log("Grade B"); } else if (marks >= 40) { console.log("Pass"); } else { console.log("Fail"); } ``` ## Output ```text Grade B ``` * * * # How JavaScript Checks Conditions JavaScript checks conditions: * From top to bottom The first true condition runs. Then JavaScript stops checking further. * * * # Step-by-Step Flow ```text marks = 82 82 >= 90 ? → No 82 >= 75 ? → Yes ↓ Run Grade B ↓ Stop checking ``` * * * # Avoiding Beginner Mistakes Order matters in `else if`. Wrong order can break logic. * * * # Bad Example ```javascript if (marks >= 40) { console.log("Pass"); } else if (marks >= 90) { console.log("Grade A"); } ``` Here: * Grade A never happens because: * `marks >= 40` becomes true first * * * # The `switch` Statement `switch` is another way to handle multiple conditions. It works well when: * Comparing one value against many fixed options * * * # Example: Day of Week ```javascript let day = 2; switch(day) { case 1: console.log("Monday"); break; case 2: console.log("Tuesday"); break; case 3: console.log("Wednesday"); break; default: console.log("Invalid day"); } ``` ## Output ```text Tuesday ``` * * * # How `switch` Works JavaScript: 1. Checks the value 2. Finds matching case 3. Runs that block * * * # Switch-Case Branching Diagram ```text switch(day) │ ┌───┼─────────┐ │ │ │ 1 2 3 │ │ │ Mon Tue Wed ``` * * * # Understanding `break` This is one of the most important switch concepts. * * * # Why `break` Is Needed Without `break`: * JavaScript continues executing the next cases * * * # Example Without Break ```javascript let day = 1; switch(day) { case 1: console.log("Monday"); case 2: console.log("Tuesday"); } ``` ## Output ```text Monday Tuesday ``` This is called: > Fall-through behavior * * * # Correct Version ```javascript switch(day) { case 1: console.log("Monday"); break; case 2: console.log("Tuesday"); break; } ``` Now execution stops properly. * * * # What Is `default`? `default` works like: * The `else` block of switch It runs when: * No case matches * * * # Example ```javascript default: console.log("Invalid option"); ``` * * * # When to Use `switch` vs `if-else` This is a common beginner question. * * * # Use `if-else` When: * Conditions involve ranges * Complex logic exists * Multiple comparisons are needed Example: ```javascript marks >= 40 age >= 18 temperature > 30 ``` * * * # Use `switch` When: * Comparing one value against fixed options Example: * Days * Menu choices * Status codes * * * # Comparison Table | Use Case | Better Choice | | --- | --- | | Age check | if-else | | Marks grading | else-if | | Day of week | switch | | Menu selection | switch | | Complex conditions | if-else | * * * # Practical Comparison ## Using `if-else` ```javascript if(day === 1) { console.log("Monday"); } else if(day === 2) { console.log("Tuesday"); } ``` * * * # Using `switch` ```javascript switch(day) { case 1: console.log("Monday"); break; case 2: console.log("Tuesday"); break; } ``` `switch` looks cleaner when many fixed options exist. * * * # Assignment Practice ## Task 1: Positive, Negative, or Zero Write a program that checks: * Positive * Negative * Zero Suggested structure: * `if-else if-else` Why? * Multiple conditions and ranges * * * # Example ```javascript let num = -5; ``` Expected Output: ```text Negative ``` * * * # Task 2: Day of Week Using `switch` Write a program that prints: * Monday * Tuesday * Wednesday based on number input. Suggested structure: * `switch` Why? * Fixed known values * * * # Beginner Mental Model The easiest way to think about control flow: ```text Programs make decisions using conditions ``` That’s the heart of control flow. * * * # Complete Decision-Making Flow ```text Condition ↓ True or False? ↓ Choose which code runs ``` * * * # Final Thoughts Control flow is one of the most important programming concepts because it allows programs to make decisions. The key ideas are: | Structure | Purpose | | --- | --- | | `if` | Run code if true | | `if-else` | Choose between two paths | | `else if` | Handle multiple conditions | | `switch` | Compare fixed values | As you continue learning JavaScript, control flow will appear everywhere: * Authentication * Form validation * Games * APIs * Backend logic Mastering these basics builds a strong programming foundation.