JavaScript if, else if, and else: the practical difference

An if statement asks a question. An else if asks the next question only when every earlier answer was false. An else handles whatever remains without asking another question.

That last detail is what makes a chain different from a pile of independent if statements.

const temperature = 24;

if (temperature >= 30) {
  console.log('hot');
} else if (temperature >= 20) {
  console.log('warm');
} else {
  console.log('cool');
}

The output is warm. JavaScript checks the first condition, gets false, then checks the second and gets true. It runs that block and skips the rest of the chain.

The three jobs in one chain

Each keyword has a distinct job:

An else if cannot start a chain. It depends on the preceding if. An else must be last because it accepts every case not already handled.

Why order changes the answer

Conditions should normally run from most specific to most general. Consider a grading function with the broad condition first:

function grade(score) {
  if (score >= 50) {
    return 'pass';
  } else if (score >= 85) {
    return 'distinction';
  }
}

grade(92); // "pass"

Both comparisons are true for 92, but the first true branch wins. JavaScript never reaches the distinction test. Reverse the order:

function grade(score) {
  if (score >= 85) {
    return 'distinction';
  } else if (score >= 50) {
    return 'pass';
  }

  return 'not yet';
}

This version preserves the narrower category. It also uses a final return instead of else; once an earlier branch returns from the function, an else is unnecessary.

Else-if chain versus separate if statements

Separate if statements are not mutually exclusive. Every condition is evaluated:

const permissions = ['read', 'comment'];

if (permissions.includes('read')) {
  console.log('can read');
}

if (permissions.includes('comment')) {
  console.log('can comment');
}

This correctly prints two lines because a user can have both permissions. Turning the second test into else if would print only can read.

Use an else-if chain when you want one outcome from a set. Use independent statements when several actions may all apply.

A useful review question is: “If two conditions are true, should both blocks run?” If yes, do not connect them with else.

Braces prevent misleading code

JavaScript permits a single unbraced statement:

if (isReady) start();
else wait();

It works, but braces are safer when code changes:

if (isReady) {
  logStart();
  start();
} else {
  wait();
}

Without braces, adding logStart() on a new line would not automatically put start() inside the branch. Consistent braces make the actual control flow visible.

Conditions are converted to booleans

The expression inside the parentheses does not have to produce the literal true or false. JavaScript converts it using its truthiness rules:

const username = 'ada';

if (username) {
  console.log(`Hello, ${username}`);
}

This runs because a non-empty string is truthy. That can be convenient, but an explicit comparison communicates more when values such as 0 or an empty string are valid inputs.

if (username !== '') {
  console.log(`Hello, ${username}`);
}

When the chain has grown too long

A long chain is not automatically wrong. It becomes a problem when readers cannot see the decision model. Consider another structure when:

• exact keys map directly to results—use an object or Map;
• each case performs behaviour owned by a different type—consider polymorphism;
• each branch exits early—use guard clauses to flatten the function;
• one value is compared against many fixed cases—a switch may be easier to scan.

The right structure makes exclusivity and priority obvious. For a small ordered decision, if / else if / else remains the clearest tool.

A compact mental model

Read a chain as a single sentence: if this, otherwise if that, otherwise this fallback. It selects no more than one branch. Separate sentences—separate if statements—can each run independently.

For the formal statement rules, see MDN’s JavaScript if...else reference.