JavaScript If...Else Statements

If Statement

The if statement executes a block of code only if a specified condition evaluates to true. It's the most basic form of conditional logic—"if this condition is true, do this." The if statement is fundamental to programming because it allows code to make decisions and respond to different situations dynamically.

The condition to test is written in parentheses () immediately after the if keyword. The condition can be any expression that evaluates to a boolean, a comparison (age >= 18), a variable (if (isActive)), or any value that JavaScript will convert to true or false based on truthiness/falsiness rules.

If the condition is true (or truthy), the code block in curly braces {} executes. If the condition is false (or falsy), the code block is skipped entirely and program execution continues after the if statement. This selective execution is how programs adapt their behavior based on circumstances.

You can have multiple independent if statements in sequence, and each will be evaluated separately. Unlike else if, multiple ifs don't depend on each other—each condition is tested regardless of previous results. This means multiple if blocks can execute in sequence if their conditions are all true.

While single-statement if blocks can omit curly braces (if (x) doSomething();), it's strongly recommended to always use {} even for single statements. Braces prevent bugs when you later add more statements, make code more readable, and avoid ambiguity in nested conditions. Consistency and clarity outweigh the minor brevity of omitting braces.

// Simple if
let age = 18;

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

// If without braces (single statement)
if (age >= 18)
  console.log("Adult");

// Multiple conditions
let score = 85;

if (score >= 90) {
  console.log("Grade: A");
}

if (score >= 80) {
  console.log("Grade: B");
}

If...Else Statement

The else clause executes a block of code when the if condition is false. It provides an alternative path—"if this condition is true, do this; otherwise, do that." The else block only runs when the if condition fails, creating a binary choice. else is always paired with a preceding if and cannot exist independently.

The else if clause tests an additional condition if the previous if or else if was false. You can chain multiple else if clauses to test several conditions in sequence. This creates a multi-way branch: "if A, do X; else if B, do Y; else if C, do Z." It's cleaner than nesting multiple if statements.

In an if...else if...else chain, only one code block executes—the first one whose condition is true, or the else block if none are true. Once a condition matches and its block executes, the remaining conditions aren't tested. This is different from multiple independent if statements where several blocks might execute.

Conditions are tested in order from top to bottom. The order matters when conditions overlap. For example, checking if (score >= 80) before if (score >= 90) would prevent the 90+ check from ever triggering. Always order conditions from most specific to least specific, or from highest to lowest value in range checks.

The else clause is optional—you can have if without else, or if...else if without a final else. However, including a final else is often good practice for handling unexpected cases or providing a default behavior. It makes code more robust by ensuring all possible paths are handled.

// If...Else
let age = 16;

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

// If...Else If...Else
let score = 85;

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");
}

// Ternary operator (shorthand)
let status = (age >= 18) ? "Adult" : "Minor";
console.log(status);