JavaScript Else If: Chaining Multiple Conditions

When two paths are not enough, else if gives you more. It lets you chain as many conditions as you need, and JavaScript checks them one by one from top to bottom. The first condition that is true wins, and the rest are skipped.

javascript

const score = 78;
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");
}
// "Grade: C" prints -- 78 >= 70 is the first condition that is true

This is the else if pattern: a chain of conditions, each checked only if all the ones above it were false. A single if/else can only offer two outcomes, but real decisions often need three, four, or more distinct paths, which is exactly the gap else if fills.

The else if Syntax

The structure is an if, followed by any number of else if blocks, optionally ending with one else. Only one block in the whole chain ever runs, no matter how many else if blocks you add:

javascript

if (condition1) {
  // runs when condition1 is true
} else if (condition2) {
  // runs when condition1 is false AND condition2 is true
} else if (condition3) {
  // runs when 1 and 2 are false AND condition3 is true
} else {
  // runs when every condition above was false
}

Each else if is a combination of else and if. It reads as "otherwise, if this other thing is true." You can have as many else if blocks as you need, and the final else is optional.

How JavaScript Evaluates the Chain

JavaScript starts at the top and works downward. As soon as it finds a true condition, it runs that block and exits the entire chain. No further conditions are checked, even if a later condition would also have been true. This is why the order of your conditions matters, and why swapping two branches can silently change what your code does without producing any error.

Getting the Order Right

The order of conditions determines which block runs, and this is the single most common source of bugs in else if chains. Put the most specific or highest-priority conditions first. Here the broad range comes first by mistake, so it catches every case before the narrower one gets a chance to run:

javascript

const hour = 6;
// Wrong order: "Morning" condition swallows "Early bird" condition
if (hour < 12) {
  console.log("Morning");
} else if (hour < 7) {
  console.log("Early bird"); // Never runs because hour < 12 catches it first
}

Swapping the order fixes it. Putting the narrower range first means it gets checked before the broader one has a chance to catch the same value, so each hour value finally reaches the branch that actually describes it:

javascript

// Right order: most specific condition comes first
if (hour < 7) {
  console.log("Early bird");
} else if (hour < 12) {
  console.log("Morning");
}
// Both 5 and 9 are less than 12, but only 5 catches the first check

When conditions overlap, the first one that matches wins. Always put narrow ranges and specific checks before broader ones. A useful habit is to sort your conditions from most restrictive to least restrictive before you write the chain, rather than fixing the order after a bug shows up.

Practical Examples

The two examples below show how the same else if pattern applies to two different everyday problems: picking a price bracket from a number, and validating a piece of text against several rules in order.

Tiered pricing

javascript

function getTicketPrice(age) {
  if (age < 5) return "Free";
  else if (age < 13) return "$8 (Child)";
  else if (age < 18) return "$12 (Youth)";
  else if (age >= 65) return "$10 (Senior)";
  else return "$15 (Adult)";
}
 
console.log(getTicketPrice(4));  // "Free"
console.log(getTicketPrice(70)); // "$10 (Senior)"

Each age group is a distinct range, and the ranges do not overlap. The under-5 check comes first because it is the narrowest range, and the broad Adult case is the final else.

Form validation

javascript

function validateEmail(email) {
  if (!email) return "Email is required.";
  else if (!email.includes("@")) return "Email must contain an @ symbol.";
  else if (email.startsWith("@") || email.endsWith("@")) return "Email cannot start or end with @.";
  else if (!email.includes(".")) return "Email must contain a domain.";
  else return "Email looks valid.";
}
 
console.log(validateEmail(""));               // "Email is required."
console.log(validateEmail("user@domain"));    // "Email must contain a domain."
console.log(validateEmail("user@domain.com")); // "Email looks valid."

Each condition checks one rule, and the chain stops at the first failure. This is a common pattern for validation where you want to show only one error at a time, rather than overwhelming the user with every problem in the input at once. Ordering the checks from most fundamental (is there a value at all) to most specific (does it look like a real email) keeps the error messages meaningful.

When to Use switch Instead

An else if chain works well for 2 to 6 conditions. When you are checking one value against many exact matches, a switch statement can be cleaner. This chain works, but it repeats the same variable name in every check:

javascript

if (status === "draft") {
  showDraftUI();
} else if (status === "published") {
  showPublishedUI();
} else if (status === "archived") {
  showArchivedUI();
} else {
  showDefaultUI();
}

The equivalent switch statement carries the same logic without repeating status in every branch, which becomes noticeably shorter to scan once there are more than three or four cases:

javascript

switch (status) {
  case "draft":     showDraftUI(); break;
  case "published": showPublishedUI(); break;
  case "archived":  showArchivedUI(); break;
  default:          showDefaultUI();
}

If you find yourself typing a strict equality check against the same variable in every else if, that is a sign that switch might be a better fit. For more on this decision, see the switch statement guide.

Using a Final else as a Safety Net

Always include a final else in your chain, even if you think all possible values are covered:

javascript

if (userRole === "admin") {
  showAdminPanel();
} else if (userRole === "editor") {
  showEditorPanel();
} else if (userRole === "viewer") {
  showViewerPanel();
} else {
  // Unexpected role: log it and show a safe fallback
  console.warn("Unknown role:", userRole);
  showViewerPanel();
}

The final else catches unexpected values, data corruption, and future changes. It makes your code more robust without adding complexity.

Avoid the Pyramid

Chaining is clean when conditions are at the same level. Nesting if inside else creates a "pyramid" that is harder to follow, since each new check adds another level of indentation. The deeper the nesting goes, the more the reader has to hold in their head just to reach the innermost condition:

javascript

// Pyramid -- hard to read
if (a) { doA(); }
else {
  if (b) { doB(); }
  else {
    if (c) { doC(); }
    else { doFallback(); }
  }
}

else if flattens this into a single level with no extra indentation, even though it checks the exact same conditions in the exact same order:

javascript

// Flat chain -- same logic, easier to scan
if (a) {
  doA();
} else if (b) {
  doB();
} else if (c) {
  doC();
} else {
  doFallback();
}

Use else if whenever you have multiple independent conditions to check in sequence. It keeps every branch at the same indentation level, so a reader can scan top to bottom instead of tracking brace depth. For the core if/else pattern, see the if else guide.