JavaScript Conditional Statements: If, Else, Switch Guide

Conditional statements are how JavaScript makes decisions. Instead of running every line of code in order, a conditional lets you say "only run this part if something is true."

JavaScript has four main ways to write conditions: if, else, else if, and switch. Each one checks a condition and runs different code depending on the result.

The Four Conditional Forms

The if Statement

An if statement runs a block of code only when its condition is true. If the condition is false, the block is skipped entirely:

javascript

const temperature = 35;
 
if (temperature > 30) {
  console.log("It is a hot day.");
}
// "It is a hot day." prints because 35 > 30 is true

The condition inside the parentheses can be any expression that resolves to true or false. This is usually a comparison operator like greater than, equals, or greater than or equal to.

The if...else Statement

else provides a fallback path. When the if condition is false, the else block runs instead:

javascript

const isLoggedIn = false;
 
if (isLoggedIn) {
  console.log("Welcome back!");
} else {
  console.log("Please log in.");
}
// "Please log in." prints because isLoggedIn is false

Every if can have one else. The else block is optional. If you only need to do something when the condition is true and nothing when it is false, leave else out.

The if...else if...else Statement

else if lets you check multiple conditions in sequence. JavaScript checks each condition from top to bottom and runs the first block whose condition is true:

javascript

const score = 82;
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: B" prints because 82 >= 80 is the first true condition

The order matters. JavaScript stops at the first match, even if later conditions would also be true. In the example above, the 80-or-above check matches first, so "Grade: B" prints. The 70-or-above check and the final else never run.

The diagram shows how JavaScript walks through the chain: each condition is tested in order, and the first match determines the outcome. No later conditions are checked once a match is found.

The switch Statement

switch compares one value against several possible cases. When a case matches, the code for that case runs:

javascript

const day = "Monday";
switch (day) {
  case "Monday": console.log("Start of the work week."); break;
  case "Friday": console.log("Almost the weekend."); break;
  default:       console.log("Midweek day.");
}
// "Start of the work week." prints because day is "Monday"

Each case is checked in order, and break stops execution once a match runs. Without break, JavaScript falls through and keeps running the code in the next case too. Fall-through can be intentional, which is useful when two cases should share the same result:

javascript

switch (day) {
  case "Saturday":
  case "Sunday":
    console.log("It is the weekend!");
    break;
}

Because Saturday has no break, execution falls through into the Sunday case and runs its code. Both days share the same output.

A few more rules for switch:

• default runs when no case matches. It is like else at the end of an if chain.
• Strict comparison: switch compares using strict equality internally, so a string like "3" does not match the number 3.

Choosing Between if/else and switch

A range check like age brackets reads better as if/else, since each branch depends on a comparison rather than an exact value:

javascript

if (age < 13) {
  console.log("Child");
} else if (age < 20) {
  console.log("Teenager");
} else {
  console.log("Adult");
}

An exact-match check like a user role reads better as switch, since every branch compares the same variable against one specific value:

javascript

switch (userRole) {
  case "admin":  showAdminPanel(); break;
  case "editor": showEditorTools(); break;
  case "viewer": showReadOnlyView(); break;
}

For a deeper comparison of these two approaches, see the switch vs if else guide.

Nesting Conditionals

You can put conditionals inside other conditionals. This is called nesting:

javascript

const hasTicket = true, age = 16;
if (hasTicket) {
  if (age >= 18) {
    console.log("Access granted to all areas.");
  } else {
    console.log("Access granted to general area only.");
  }
} else {
  console.log("No ticket, no entry.");
}
// "Access granted to general area only."

Nesting is powerful but quickly becomes hard to read. If you find yourself three levels deep, consider extracting the inner logic into a separate function.