Tools: Mastering Control Flow in JavaScript: If, Else, Switch & Ternary Made Simple

Introduction: Every Decision Has a Path ## What is Control Flow in Programming? ## if - else if - else ## The switch Statement ## When to Use switch vs if-else ## The Ternary Operator (Concise Decision Making) ## Conclusion: Writing Code That Thinks Imagine you’re walking to your college. So we can see, every action depends on a condition. Programming works exactly the same way. A program without decision-making is just a sequence of instructions. But real-world applications must respond, adapt, and branch based on data. That branching mechanism is called control flow. Control flow determines the order in which statements execute, including conditional branching, loops, and function execution. By default, JavaScript executes code top to bottom. But using control flow statements, we can: Control flow is how your program decides what to run and when. The if statement runs a block of code only if the passed condition is true. Example: Checking Age Step-by-Step Execution The if-else Statement What if we want an alternative path? Means we want that if the condition passed gets false then another action should work. That’s where else comes in. Example: Pass or Fail Only one block executes. When we need to give multiple conditions, we use else if. But you might think that Instead of else if, why can't we use multiple if and an else at the end?!! Why do we need it?! Let's assume that there are 3 if blocks and lastly an else block in a program. If the 2nd if block satisfies the condition, then it shouldn't go to the next if and else block, right?! But in reality it's gonna check the 3rd if block also, as it sees the 3rd if block as a separate condition block. That's why else if comes in the picture! Each if statement is evaluated independently. That means even if one if condition becomes true, JavaScript will still check the remaining if blocks. But with else if, once a condition becomes true, JavaScript immediately stops checking further conditions and skips the rest of the ladder. Example: Grade Classification ‼️Important Rule: JavaScript checks conditions top to bottom. So order matters. When you’re comparing one variable against multiple fixed values, switch is much cleaner than the previous technique. switch uses strict equality (===) internally to check which case matches the required logic. Example: Day of the Week ‼️Why is break Important? Switch compares once. After a case matches, execution continues sequentially until a break is found or end of switch. This is called fall-through behaviour. Example without break: The ternary operator is a shorthand for if-else using ? and :. It returns a values based on the condition ,i.e, if the condition be true then the first expression witll be returned else the second one! Control flow transforms JavaScript from a passive script into an intelligent decision-maker. Mastering control flow is foundational. Because once your code can decide, it can react. And once it reacts — it becomes powerful. Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well For further actions, you may consider blocking this person and/or reporting abuse CODE_BLOCK: if (condition) { // code runs if condition is true } Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: if (condition) { // code runs if condition is true } CODE_BLOCK: if (condition) { // code runs if condition is true } CODE_BLOCK: let age = 20; if (age >= 18) { console.log("You are eligible to vote."); } Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: let age = 20; if (age >= 18) { console.log("You are eligible to vote."); } CODE_BLOCK: let age = 20; if (age >= 18) { console.log("You are eligible to vote."); } CODE_BLOCK: if (condition) { // runs if true } else { // runs if false } Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: if (condition) { // runs if true } else { // runs if false } CODE_BLOCK: if (condition) { // runs if true } else { // runs if false } CODE_BLOCK: let marks = 40; if (marks >= 50) { console.log("You passed."); } else { console.log("You failed."); } Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: let marks = 40; if (marks >= 50) { console.log("You passed."); } else { console.log("You failed."); } CODE_BLOCK: let marks = 40; if (marks >= 50) { console.log("You passed."); } else { console.log("You failed."); } CODE_BLOCK: if (condition1) { // runs if condition1 is true } else if (condition2) { // runs if condition2 is true } else { // runs if none are true } Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: if (condition1) { // runs if condition1 is true } else if (condition2) { // runs if condition2 is true } else { // runs if none are true } CODE_BLOCK: if (condition1) { // runs if condition1 is true } else if (condition2) { // runs if condition2 is true } else { // runs if none are true } CODE_BLOCK: 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"); } Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: 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"); } CODE_BLOCK: 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"); } CODE_BLOCK: switch (expression) { case value1: // code break; case value2: // code break; default: // fallback if any of the cases don't match } Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: switch (expression) { case value1: // code break; case value2: // code break; default: // fallback if any of the cases don't match } CODE_BLOCK: switch (expression) { case value1: // code break; case value2: // code break; default: // fallback if any of the cases don't match } CODE_BLOCK: let day = 3; 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"); } Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: let day = 3; 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"); } CODE_BLOCK: let day = 3; 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"); } CODE_BLOCK: let day = 1; switch (day) { case 1: console.log("Monday"); case 2: console.log("Tuesday"); } Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: let day = 1; switch (day) { case 1: console.log("Monday"); case 2: console.log("Tuesday"); } CODE_BLOCK: let day = 1; switch (day) { case 1: console.log("Monday"); case 2: console.log("Tuesday"); } CODE_BLOCK: Monday Tuesday Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: Monday Tuesday CODE_BLOCK: Monday Tuesday CODE_BLOCK: // Range → use if-else if (marks >= 90) { ... } // Fixed value → use switch switch(role) { ... } Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: // Range → use if-else if (marks >= 90) { ... } // Fixed value → use switch switch(role) { ... } CODE_BLOCK: // Range → use if-else if (marks >= 90) { ... } // Fixed value → use switch switch(role) { ... } CODE_BLOCK: condition ? expressionIfTrue : expressionIfFalse; Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: condition ? expressionIfTrue : expressionIfFalse; CODE_BLOCK: condition ? expressionIfTrue : expressionIfFalse; CODE_BLOCK: let age = 18; let result = age >= 18 ? "Adult" : "Minor"; console.log(result); // Adult Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: let age = 18; let result = age >= 18 ? "Adult" : "Minor"; console.log(result); // Adult CODE_BLOCK: let age = 18; let result = age >= 18 ? "Adult" : "Minor"; console.log(result); // Adult - If it’s raining → you take an umbrella for walk. - Else → you walk normally. - If it’s exam tomorrow → time to study before the exam day. - Else → you scroll reels in Instagram. - Skip parts of code - Execute specific blocks based on conditions - Choose between multiple paths - age >= 18 → evaluates to true - Since condition is true → block executes - Message is printed - If the condition is false, nothing happens. - If marks ≥ 50 → first block runs - Otherwise → else block runs - Because execution didn’t stop. > break prevents unintended execution. - Conditions involve ranges (marks >= 50) - Logical operators (&&, ||) are needed - Complex comparisons - Comparing one variable to many exact values - Cleaner readability is required - Handling menu options, days, roles, etc. - It’s concise and clean. - But avoid nesting ternaries at the beginner level — readability drops quickly. - Use ternary for simple conditions only. - if → single condition - if-else → two paths - else if → multiple conditions - switch → multiple fixed values - Ternary → concise decisions