Frontend Master

JavaScript Curriculum

Chapter 1›Making Decisions· Lesson 4

+30 XP

Making Decisions

easy

~15 min·30 XP·if / else if / else

The Nexus app needs to greet users differently based on their role. Admins see the control panel. Regular users see their dashboard. Guests see a sign-up prompt. A single greeting won't cut it anymore. You need code that looks at who's there — and responds differently each time.

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

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.

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

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.

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:

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:

if / else if / else — trace execution

1if (role === "admin") {

2 return "Welcome to the control panel."

3} else if (role === "user") {

4 return "Welcome back!"

5} else {

6 return "Please sign up…"

🧠JavaScript reads top to bottom, stops at first match

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:

comparison operators — edit values, click operator

===→true

Same value AND same type

Always use === not == — double equals does type coercion and produces surprising results. Triple equals is strict and predictable.

⚠️=== not ==

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:

condition sandbox — drag the sliderscore = 75

0255075100

score >= 90

false

score >= 80

false

score >= 70

trueGrade C ✓

else

JavaScript checks each condition top to bottom and stops at the first true one. Only one branch ever runs.

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.

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"

💡return exits the function immediately

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

// 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"
}

✗ redundant

if (isLoggedIn == true)

✓ direct — booleans are already true/false

if (isLoggedIn)

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.

Challenge

Write a function called getGreeting(role) that returns different strings based on role: if role is \"admin\" return \"Welcome to the control panel.\", if role is \"user\" return \"Welcome back!\", otherwise return \"Please sign up to continue.\". Then log the result for all three roles.

conditionalsif-elsecontrol-flowcomparison-operatorsboolean-logic

javascript

Loading editor…

Hit ⌘↵ or click Run to see output here.

Making Decisions

easy

~15 min·30 XP·if / else if / else

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.

That's what if / else is for.

The anatomy of an if statement

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.

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

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.

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:

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:

if / else if / else — trace execution

1if (role === "admin") {

2 return "Welcome to the control panel."

3} else if (role === "user") {

4 return "Welcome back!"

5} else {

6 return "Please sign up…"

🧠JavaScript reads top to bottom, stops at first match

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:

comparison operators — edit values, click operator

===→true

Same value AND same type

Always use === not == — double equals does type coercion and produces surprising results. Triple equals is strict and predictable.

⚠️=== not ==

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:

condition sandbox — drag the sliderscore = 75

0255075100

score >= 90

false

score >= 80

false

score >= 70

trueGrade C ✓

else

JavaScript checks each condition top to bottom and stops at the first true one. Only one branch ever runs.

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.

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"

💡return exits the function immediately

Common patterns you'll use every day

// 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"
}

✗ redundant

if (isLoggedIn == true)

✓ direct — booleans are already true/false

if (isLoggedIn)

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.

Challenge

conditionalsif-elsecontrol-flowcomparison-operatorsboolean-logic