JavaScript if else

Table of Contents +

In the previous lesson, we learned how an if statement runs code only when a condition is true. Now let’s add an else to handle the false case, and else if to choose between many options.

🔀 The else Block

An if runs code when its condition is true. An else block runs when that condition is false. Together they give us a clear two-way choice.

const age = 16;

if (age >= 18) {
  console.log("You can vote.");
} else {
  console.log("You are too young to vote.");
}
// "You are too young to vote."

Let’s walk through what this code does:

const age = 16; stores the value we want to test.
if (age >= 18) checks whether age is at least 18. Since 16 is not, this condition is false.
Because the if is false, JavaScript skips its block and runs the else block, printing "You are too young to vote.".

Exactly one of the two blocks always runs.

else has no condition

An else block does not get its own condition. It simply catches everything that the if did not match.

🪜 The else if Chain

When we have more than two options, we chain conditions with else if. JavaScript checks each condition from top to bottom and runs the first one that is true.

const score = 85;

if (score >= 90) {
  console.log("Grade: A");
} else if (score >= 80) {
  console.log("Grade: B");
} else {
  console.log("Grade: C");
}
// "Grade: B"

Let’s trace how JavaScript picks a branch:

if (score >= 90) is checked first. Since 85 is not at least 90, this is false and its block is skipped.
else if (score >= 80) is checked next. Since 85 is at least 80, this is true, so it prints "Grade: B" and stops.
The final else is the fallback that would run only if none of the conditions above matched.

Keyword	When it runs	Needs a condition?
`if`	When its condition is true	Yes
`else if`	When earlier conditions were false and this one is true	Yes
`else`	When no condition above it matched	No

⬇️ Conditions Are Checked in Order

JavaScript reads the chain from top to bottom and stops at the first true condition. Every condition after that is skipped, even if it would also be true.

const time = 9;

if (time < 12) {
  console.log("Good morning, Alex!");
} else if (time < 18) {
  console.log("Good afternoon, Alex!");
} else {
  console.log("Good evening, Alex!");
}
// "Good morning, Alex!"

Let’s see why only the first greeting prints:

if (time < 12) is checked first. Since 9 is less than 12, this is true, so it prints "Good morning, Alex!".
Once that match is found, JavaScript stops, so else if (time < 18) and the final else are never even checked.

Because checking happens in order, we put the most specific conditions first and the general fallback last.

Order matters

Once a condition matches, JavaScript stops checking. Arrange your conditions from the narrowest case to the widest so each branch can be reached.

⚠️ Common Mistakes to Avoid

Mistake	Problem	Solution
Wrong order of conditions	A broad condition runs first and hides the specific ones	Put the narrowest conditions at the top
Overlapping ranges	Two conditions match the same value, so the wrong block runs	Make the ranges line up without gaps or overlap
Forgetting the `else`	Unexpected values fall through with no result	Add a final `else` to catch everything left over
Using `=` instead of `===`	`=` assigns a value instead of comparing	Use `===` to compare inside conditions

Here is the assignment mistake in code:

const status = "active";

// ❌ Wrong: = assigns "active" and is always truthy
if (status = "active") { }

// ✅ Correct: === compares the two values
if (status === "active") { }

Let’s compare the two lines:

The ❌ line uses a single =, which assigns "active" to status instead of comparing. The assignment hands back "active", a truthy value, so the if always runs no matter what status held.
The ✅ line uses ===, which compares the two values and returns true only when they actually match. This is what we want inside a condition.

🔧 Try It Yourself!

Create a score variable and print "A", "B", or "C" using if, else if, and else.
Change the score so each branch runs at least once, and confirm the output.
Build a greeting that prints morning, afternoon, or evening based on an hour variable.
Swap two of your conditions to put the broad one first, then notice which branch wins.

🧩 What You’ve Learned

✅ else runs when the if condition is false
✅ else if chains multiple conditions into one decision
✅ Conditions are checked from top to bottom, and the first true one runs
✅ Once a condition matches, the rest of the chain is skipped
✅ Order your conditions carefully and use ===, not =, to compare

🚀 What’s Next?

When you have many fixed values to compare against, there is a cleaner tool than a long else if chain. Let’s continue to switch.

Previous JavaScript if Statement Next JavaScript switch Statement

Share & Connect

Share on LinkedIn