# Control Flow in JavaScript: if-else and switch Explained Every program you write needs to make decisions. Should this user see the dashboard or the login page? Is the score high enough to pass? What day of the week is it? Control flow is how you teach your program to choose different paths based on different conditions. * * * ## What Is Control Flow? By default, JavaScript runs your code line by line, from top to bottom. Control flow lets you change that — skipping some lines, repeating others, or branching into completely different paths depending on what is true at that moment. Think of it like a road with forks. Depending on a condition, your code takes one path or another. ```plaintext Start | v [Condition?] | | Yes No | | Path A Path B | | v v Continue... ``` * * * ## The `if` Statement The simplest form of control flow. If a condition is true, run the code inside. If not, skip it entirely. ```javascript let age = 20; if (age >= 18) { console.log("You are an adult."); } // "You are an adult." ``` If `age` were 15, nothing would print — the block is simply skipped. * * * ## The `if-else` Statement Use `else` to handle what happens when the condition is false. ```javascript let age = 15; if (age >= 18) { console.log("You are an adult."); } else { console.log("You are a minor."); } // "You are a minor." ``` One condition, two possible outcomes. Only one block ever runs. ```plaintext [age >= 18?] | | true false | | "adult" "minor" ``` * * * ## The `else if` Ladder When you have more than two possible outcomes, chain conditions using `else if`. ```javascript let marks = 72; 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: F"); } // "Grade: C" ``` JavaScript checks each condition from top to bottom. The moment one is true, it runs that block and skips the rest. The final `else` is the fallback — it runs only if nothing above was true. Step by step for `marks = 72`: * Is `72 >= 90`? No, move on. * Is `72 >= 75`? No, move on. * Is `72 >= 60`? Yes — print "Grade: C" and stop. * * * ## The `switch` Statement `switch` is a cleaner alternative when you are checking one variable against multiple exact values. ```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; default: console.log("Weekend"); } // "Wednesday" ``` The `switch` statement checks the value of `day` against each `case`. When it finds a match, it runs that block and stops. ### Why `break` matters Without `break`, JavaScript does not stop at the matched case — it keeps running every case below it. This is called **fall-through**. ```javascript let day = 2; switch (day) { case 1: console.log("Monday"); case 2: console.log("Tuesday"); // matches here case 3: console.log("Wednesday"); // runs anyway — no break above! } // "Tuesday" // "Wednesday" ``` Always add `break` at the end of each case unless you intentionally want fall-through behavior. ### The `default` case `default` works like the `else` in an `if-else` chain. It runs when no case matches. ```javascript let color = "purple"; switch (color) { case "red": console.log("Red selected"); break; case "blue": console.log("Blue selected"); break; default: console.log("Unknown color"); } // "Unknown color" ``` * * * ## Switch Branching at a Glance ```plaintext switch (value) | |--- case 1 --> action --> break |--- case 2 --> action --> break |--- case 3 --> action --> break |--- default --> fallback action ``` * * * ## `if-else` vs `switch` — When to Use Which | Situation | Use if-else | Use switch | | --- | --- | --- | | Range checks | Yes (age > 18, marks < 50) | No | | Exact value match | Works but verbose | Cleaner and readable | | Many conditions | Gets hard to read | Much cleaner | | Complex conditions | Yes ( &&, || ) | No | | One variable, many possible values | Possible | Ideal | A practical rule: if you are comparing one variable to a list of specific values, `switch` is the cleaner choice. If you are working with ranges, multiple variables, or complex conditions, stick with `if-else`. * * * ## Putting It All Together ```javascript let score = 85; let grade; if (score >= 90) { grade = "A"; } else if (score >= 75) { grade = "B"; } else if (score >= 60) { grade = "C"; } else { grade = "F"; } console.log("Grade:", grade); // "Grade: B" // Now print a message based on the grade using switch switch (grade) { case "A": console.log("Outstanding performance."); break; case "B": console.log("Good work, keep it up."); break; case "C": console.log("You passed. Aim higher next time."); break; default: console.log("You need to work harder."); } // "Good work, keep it up." ``` * * * ## Practice Assignment Work through both programs to practice what you have learned: **1\. Check if a number is positive, negative, or zero:** ```javascript let number = -7; 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."); } // "The number is negative." ``` Why `if-else` here? Because you are checking ranges and relationships (`> 0`, `< 0`), not exact values. `switch` cannot handle that cleanly. **2\. Print the day of the week using switch:** ```javascript let dayNumber = 5; switch (dayNumber) { 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 number."); } // "Friday" ``` Why `switch` here? Because you are matching one variable (`dayNumber`) against a list of exact values. That is exactly what `switch` is designed for — and it reads far more cleanly than a long `else if` chain. * * * ## Quick Recap * Control flow controls which parts of your code run and when * Use `if` when you have a single condition to check * Use `if-else` for two possible outcomes * Use `else if` to handle multiple conditions in sequence * Use `switch` when comparing one variable against multiple exact values * Always add `break` at the end of each `switch` case to prevent fall-through * `default` in switch and `else` in if-else serve the same purpose — they are the fallback Understanding control flow is one of the most important skills you will build as a developer. Once this feels natural, you will find yourself writing cleaner logic in every program you create. Happy coding! 🚀 * * * > If you enjoyed this article, check out my other blogs on this profile. 🔗 Connect with me: [LinkedIn](https://linkedin.com/in/rajharsh03) | [GitHub](https://github.com/RajHarsh03) | [X (Twitter)](https://x.com/rajharsh03)