JS Conditionals

Think of a border crossing checkpoint, if you have a valid passport, you're waved through, if not, you're directed to a different line, the outcome always depends on checking a specific condition first. Conditionals in JavaScript work the same way, they let your code check whether something is true and run different instructions depending on the answer, using if, else if, and else. Nearly every interactive feature relies on conditionals somewhere, whether it's checking login status or showing a personalized message on cookiescursor.com.

In this page:

The if Statement
else
else if
Nested if Statements
Ternary Operator and Short Circuit Evaluation

The if Statement

An if statement runs its code block only when the condition inside its parentheses evaluates to true, and skips the block entirely if the condition is false.

Note: Any value can appear as a condition, JavaScript automatically converts it to true or false based on whether it's truthy or falsy.

Warning: Omitting curly braces around a multi-line if body only makes the very next single statement conditional, later lines run unconditionally.

Example: The if Statement

javascript

const age = 20;
if (age >= 18) {
  console.log("You are an adult.");
}

else

An else block runs only when the preceding if condition was false, providing a fallback path so exactly one of the two blocks always runs. An else is always tied to the nearest unmatched if that precedes it, which matters once conditionals are nested.

Note: Use else specifically for a genuine alternative outcome, not just as a place to put unrelated code that always needs to run.

Warning: An else block must directly follow its matching if block, inserting other statements in between breaks the connection.

Example: else

javascript

const age = 15;
if (age >= 18) {
  console.log("Adult");
} else {
  console.log("Minor");
}

else if

else if allows checking additional conditions in sequence after the initial if, stopping and running the first block whose condition evaluates to true, useful when there are more than two possible outcomes.

Note: Order your else if conditions from most specific to least specific, since JavaScript stops at the first one that matches.

Warning: An else if chain always runs at most one block, even if multiple conditions would technically be true, only the first match executes.

Example: else if

javascript

const score = 75;
if (score >= 90) {
  console.log("A");
} else if (score >= 70) {
  console.log("B");
} else {
  console.log("C");
}

Nested if Statements

An if statement can be placed inside another if statement's block, letting you check a second condition only after the first has already been confirmed true.

Note: When nesting starts feeling too deep, combining conditions with && inside a single if is often clearer than several nested levels.

Warning: Deeply nested if statements can quickly become hard to read, consider refactoring into separate functions or combined conditions once nesting gets too deep.

Example: Nested if Statements

javascript

const age = 25;
const hasLicense = true;
if (age >= 18) {
  if (hasLicense) {
    console.log("Can drive");
  }
}

Ternary Operator and Short Circuit Evaluation

The ternary operator, condition ? valueIfTrue : valueIfFalse, is a compact alternative to a simple if/else, and short circuit evaluation lets && stop at the first falsy value and || stop at the first truthy value, without checking the rest.

Note: Short circuit evaluation with && is a common pattern for conditionally running code only when a value exists, like userData && userData.name.

Warning: Ternary operators are best for simple value selection, using them for complex logic with side effects makes code much harder to follow.

Example: Ternary Operator and Short Circuit Evaluation

javascript

const age = 20;
const status = age >= 18 ? "adult" : "minor";
console.log(status);
console.log(true || console.log("never runs"));

Common Mistakes

Forgetting curly braces around a multi-statement if block, which causes only the very next line to be conditional, not the whole intended block.
Using a single = instead of === inside a condition, which silently assigns a value instead of comparing one.
Writing overly deep chains of nested if statements when a cleaner else if chain, or even a switch, would be more readable.

Chapter Summary

if runs a block only when its condition is true, and else provides a fallback when it's false.
else if allows checking multiple conditions in sequence, stopping at the first one that's true.
The ternary operator offers a compact form for simple two-outcome conditionals, and short circuit evaluation lets && and || skip unnecessary checks.

Browser Support

if, else if, else, and the ternary operator are core JavaScript syntax supported identically in every browser.

🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson JS Math Next Lesson → JS Switch

JS Conditionals

The if Statement

else

else if

Nested if Statements

Ternary Operator and Short Circuit Evaluation

Chapter Quiz — Complete all 26 topics to unlock

Login to run this code