## The problem with one-size-fits-all code Everything you've written so far runs the same way every time. Same input, same output — no choices, no branching. Real applications make decisions constantly. *Is this user logged in? Do they have permission? Is the value valid?* Every one of those questions needs code that can go different directions based on the answer. That's what `if / else` is for. --- ## The anatomy of an if statement ```js if (condition) { // runs when condition is true } ``` Three parts: the **keyword** `if`, the **condition** in parentheses, and the **block** in curly braces. The block only runs if the condition evaluates to `true`. ```js const isLoggedIn = true if (isLoggedIn) { console.log("Show dashboard") } // → "Show dashboard" ``` If `isLoggedIn` were `false`, nothing would print. The block gets skipped entirely. --- ## Adding a fallback with else ```js if (condition) { // runs when true } else { // runs when false — the fallback } ``` `else` is your default path. It runs whenever the `if` condition is `false` — and it's optional. Not every `if` needs an `else`. ```js const isLoggedIn = false if (isLoggedIn) { console.log("Show dashboard") } else { console.log("Show login page") } // → "Show login page" ``` --- ## Handling multiple cases with else if When you have more than two possible outcomes, chain `else if` blocks between your `if` and `else`: ```js if (role === "admin") { return "Welcome to the control panel." } else if (role === "user") { return "Welcome back!" } else { return "Please sign up to continue." } ``` Click through the animation below. Pick a role and watch exactly which lines JavaScript evaluates — and which ones it skips: When JavaScript hits a true condition it runs that block and immediately jumps past all the remaining else if / else blocks. It never checks the rest. Only ONE branch ever runs per if/else chain. --- ## Conditions are just expressions that produce true or false Anything that evaluates to a boolean works as a condition. The most common source: **comparison operators**. Click any operator — then edit the values to see the result update live: JavaScript has both == (loose equality) and === (strict equality). Always use ===. The loose version does automatic type conversion that produces bizarre results: "5" == 5 is true in JS. Use === and it behaves like any sane language. --- ## Live condition evaluation Drag the slider and watch each condition evaluate in real time. Notice that JavaScript stops checking once it finds the first `true`: --- ## Functions that return different values The pattern you'll use constantly: a function that inspects its input and returns different output based on what it finds. ```js function getStatusMessage(status) { if (status === "active") { return "Account is active" } else if (status === "suspended") { return "Account has been suspended" } else { return "Unknown status" } } console.log(getStatusMessage("active")) // "Account is active" console.log(getStatusMessage("suspended")) // "Account has been suspended" console.log(getStatusMessage("deleted")) // "Unknown status" ``` Once a return statement runs, the function stops — nothing after it executes. This is why you don't need break statements in if/else the way you do in switch. Each branch returns and the function is done. --- ## Common patterns you'll use every day ```js // Guard clause — bail out early if something is wrong function greetUser(name) { if (!name) { return "Hello, stranger!" } return `Hello, ${name}!` } // Range check function classify(score) { if (score >= 90) return "excellent" if (score >= 70) return "good" if (score >= 50) return "average" return "needs work" } // Boolean flags function getAccess(isLoggedIn, isAdmin) { if (!isLoggedIn) return "login required" if (isAdmin) return "full access" return "standard access" } ``` --- ## Your challenge Write `getGreeting(role)` — a function that returns a different string for three different roles. Click the animation above with each role to visualise what your code needs to do. The pattern is: `if` → `else if` → `else`. Three conditions, one function, three possible outputs.