# Control Flow in JavaScript: If, Else, and Switch Explained Programming is not just about writing code — it is about **making decisions**. Just like humans make decisions in daily life, programs also need logic to decide **what action to take next**. In JavaScript, **control flow statements** allow the program to choose different paths based on conditions. This article explains the most important control flow structures in JavaScript: * `if` * `if-else` * `else if` * `switch` We will explore them using **simple real-life examples and easy JavaScript programs.** * * * # What Control Flow Means in Programming Control flow determines **the order in which instructions are executed in a program**. Normally, a program runs **line by line from top to bottom**, but sometimes we want the program to **make decisions**. Example in real life: Imagine a traffic signal. * If the signal is **red → stop** * If the signal is **green → go** * If the signal is **yellow → slow down** This is exactly how **control flow works in programming**. JavaScript checks conditions and decides **which block of code should run**. * * * # The `if` Statement The `if` statement executes code **only when a condition is true**. ### Syntax ```javascript if (condition) { // code to run if condition is true } ``` ### Example Check if a person is eligible to vote. ```javascript let age = 20; if (age >= 18) { console.log("You are eligible to vote."); } ``` ### How it works Step by step: 1. JavaScript checks `age >= 18` 2. If the condition is **true**, the code runs 3. If **false**, nothing happens * * * # The `if-else` Statement Sometimes we want the program to **do something else when the condition is false**. This is where `if-else` is used. ### Syntax ```javascript if (condition) { // if true } else { // if false } ``` ### Example Check if a number is even or odd. ```javascript let number = 7; if (number % 2 === 0) { console.log("Number is Even"); } else { console.log("Number is Odd"); } ``` ### Explanation * `%` means **remainder** * If remainder is **0 → even** * Otherwise **odd** * * * # The `else if` Ladder Sometimes there are **multiple conditions** to check. Example: grading system. ### Syntax ```javascript if (condition1) { // code } else if (condition2) { // code } else { // default code } ``` ### Example Student grading program. ```javascript let marks = 75; 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"); } ``` ### Step-by-step Execution JavaScript checks conditions **from top to bottom**: 1. Is marks ≥ 90? ❌ 2. Is marks ≥ 75? ✅ 3. Print **Grade B** After one condition is true, **remaining conditions are skipped**. * * * # The `switch` Statement The `switch` statement is used when **many possible values exist for a single variable**. Instead of writing many `if-else` conditions, `switch` makes the code **cleaner and easier to read**. ### Syntax ```javascript switch (expression) { case value1: // code break; case value2: // code break; default: // 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 ```javascript Wednesday ``` * * * # Why `break` is Important in Switch The `break` statement **stops the switch execution**. Without `break`, JavaScript will continue executing the next cases. Example without break: ```javascript case 3: console.log("Wednesday") case 4: console.log("Thursday") ``` Output would be: ```plaintext Wednesday Thursday ``` That is why **break is necessary** in most switch cases. * * * # When to Use `switch` vs `if-else` | Situation | Best Choice | | --- | --- | | Checking ranges (age > 18, marks > 50) | `if-else` | | Checking specific values (day = Monday, Tuesday) | `switch` | | Complex conditions | `if-else` | | Many fixed options | `switch` | ### Example Use **if-else** for grades. ```plaintext marks > 90 marks > 80 marks > 70 ``` Use **switch** for menu options. ```javascript 1 → Login 2 → Register 3 → Exit ``` * * * # Assignment Programs ## Program 1: Check Positive, Negative, or Zero ```javascript let number = -5; if (number > 0) { console.log("Positive number"); } else if (number < 0) { console.log("Negative number"); } else { console.log("Number is Zero"); } ``` ### Why `if-else`? Because we are checking **ranges of values**. * * * ## Program 2: Print Day 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 day"); } ``` ### Why `switch`? Because the value of **day can only be one specific number**. * * * # Diagram Idea 1: If-Else Flowchart ```plaintext Start | Condition (age ≥ 18?) / \ Yes No | | Eligible Not Eligible | End ``` * * * # Diagram Idea 2: Switch Branching ```plaintext day | switch / / / / / \ 1 2 3 4 5 6 7 | | | | | | | Mon Tue Wed Thu Fri Sat Sun ``` * * * # Conclusion Control flow statements allow programs to **make intelligent decisions**. JavaScript provides powerful tools such as: * `if` → for simple conditions * `if-else` → for two choices * `else if` → for multiple conditions * `switch` → for many fixed options Understanding these concepts is essential because **almost every real-world program depends on decision-making logic**. Once you master control flow, you will be able to build **interactive and dynamic applications in JavaScript**.