JavaScript Control Flow

Making Decisions in Code

Sometimes you want your code to do different things based on what's happening. Like a traffic light - if it's red, you stop. If it's green, you go.

That's what control flow does. It lets your code make decisions.

``` ┌─────────────────────┐ │ Check something │ │ (Is it true?) │ └──────────┬──────────┘ │ ┌───────┴───────┐ │ │ Yes No │ │ ┌───▼───┐ ┌───▼───┐ │ Do A │ │ Do B │ └───────┘ └───────┘ ```

Your First if Statement

Let's say you're checking if someone is old enough to vote:

```javascript const age = 20;

if (age >= 18) { console.log('You can vote!'); } ```

**What happens:** 1. JavaScript checks: Is age greater than or equal to 18? 2. If yes, it runs the code inside the curly braces 3. If no, it skips it

Adding an else

What if you want to do something when the condition is false?

```javascript const age = 15;

if (age >= 18) { console.log('You can vote!'); } else { console.log('You cannot vote yet.'); } ```

**What happens:** 1. Check if age >= 18 2. If true → show "You can vote!" 3. If false → show "You cannot vote yet."

Multiple Conditions

Sometimes you need to check more than two things. Like grading:

```javascript const score = 85;

if (score >= 90) { console.log('Grade A'); } else if (score >= 80) { console.log('Grade B'); } else if (score >= 70) { console.log('Grade C'); } else { console.log('Grade F'); } ```

**How it works:** 1. Check first condition (score >= 90) 2. If not, check second (score >= 80) 3. If not, check third (score >= 70) 4. If none match, do the else

JavaScript checks them in order and stops at the first one that's true.

Real Example: Login Check

Let's say you're building a login system:

```javascript const isLoggedIn = true; const hasPermission = false;

if (isLoggedIn) { if (hasPermission) { console.log('Welcome! You have access.'); } else { console.log('You need permission.'); } } else { console.log('Please log in first.'); } ```

This checks if the user is logged in first, then checks if they have permission.

The Switch Statement

When you have many possible values to check, switch can be cleaner:

```javascript const day = 'Monday';

switch (day) { case 'Monday': console.log('Start of week'); break; case 'Friday': console.log('Almost weekend!'); break; case 'Saturday': case 'Sunday': console.log('Weekend!'); break; default: console.log('Regular day'); } ```

**How it works:** 1. Check the value of `day` 2. Match it to a case 3. Run that code 4. `break` stops it from running other cases 5. `default` runs if nothing matches

Quick Tips

1. **Use if/else for most decisions** - It's the most common 2. **Use switch when checking one value against many options** - Like days of the week 3. **Always use curly braces** - Even for one line, it's clearer 4. **Check the most common case first** - Makes your code faster

Control flow is how you make your programs smart. They can react differently based on what's happening. Without it, your code would do the same thing every time, no matter what.