if / else / else if

Control flow is how a program decides what to do next. Without it, code runs top-to-bottom with no decisions, no branches, no reactions to different situations. The if statement is the most fundamental control flow tool in JavaScript — it evaluates a condition and runs a block of code only when that condition is true. In this lesson you will master if, else, else if, nested conditions, and the modern guard clause pattern that keeps code clean and readable.

if / else / else if Syntax #

Condition Evaluation Rules #

Guard Clause vs Nested if #

Basic Example #

// ── Basic if / else if / else ─────────────────────────────────────────────
function getGrade(score) {
    if (score >= 90) {
        return 'A';
    } else if (score >= 80) {
        return 'B';
    } else if (score >= 70) {
        return 'C';
    } else if (score >= 60) {
        return 'D';
    } else {
        return 'F';
    }
}

console.log(getGrade(95));  // 'A'
console.log(getGrade(82));  // 'B'
console.log(getGrade(55));  // 'F'

// ── Logical AND / OR in conditions ───────────────────────────────────────
function canAccessDashboard(user) {
    if (user !== null && user.isActive && (user.role === 'admin' || user.role === 'editor')) {
        return true;
    }
    return false;
}

console.log(canAccessDashboard({ isActive: true,  role: 'admin'  }));  // true
console.log(canAccessDashboard({ isActive: false, role: 'admin'  }));  // false
console.log(canAccessDashboard({ isActive: true,  role: 'viewer' }));  // false
console.log(canAccessDashboard(null));                                   // false

// ── Guard clause pattern — flat and readable ─────────────────────────────
function processOrder(order) {
    // Guard: reject invalid input early
    if (!order)               { return { error: 'No order provided' }; }
    if (!order.items?.length) { return { error: 'Order has no items' }; }
    if (order.total <= 0)     { return { error: 'Invalid order total' }; }
    if (!order.userId)        { return { error: 'No user ID on order' }; }

    // Happy path — all guards passed, safe to proceed
    const tax      = order.total * 0.08;
    const shipping = order.total >= 35 ? 0 : 5.99;
    const grand    = order.total + tax + shipping;

    return {
        orderId:  `ORD-${Date.now()}`,
        subtotal: order.total,
        tax:      tax.toFixed(2),
        shipping: shipping.toFixed(2),
        total:    grand.toFixed(2),
    };
}

console.log(processOrder(null));
// { error: 'No order provided' }

console.log(processOrder({ items: ['widget'], total: 29.99, userId: 'u42' }));
// { orderId: 'ORD-...', subtotal: 29.99, tax: '2.40', shipping: '5.99', total: '38.38' }

// ── Ternary for simple inline decisions ──────────────────────────────────
const cartCount   = 3;
const cartLabel   = cartCount === 1 ? '1 item' : `${cartCount} items`;
const freeShip    = cartCount >= 2 ? 'Free shipping!' : 'Add more for free shipping';

console.log(cartLabel);  // '3 items'
console.log(freeShip);   // 'Free shipping!'

// ── Nullish-safe conditional ──────────────────────────────────────────────
function greetUser(user) {
    if (user?.name) {
        console.log(`Welcome back, ${user.name}!`);
    } else {
        console.log('Welcome, Guest!');
    }
}

greetUser({ name: 'Alice' });  // Welcome back, Alice!
greetUser(null);               // Welcome, Guest!
greetUser({});                 // Welcome, Guest!

How It Works #

Step 1 — JavaScript Evaluates the Condition to a Boolean #

The expression inside if ( ... ) is coerced to true or false. Complex conditions using && and || short-circuit — && stops at the first falsy value, || stops at the first truthy value. This means user !== null && user.isActive never accesses user.isActive when user is null.

Step 2 — else if Chains Are Evaluated Top to Bottom #

JavaScript tests each else if in order and runs the first branch whose condition is true, then skips all remaining branches. In getGrade, a score of 85 matches score >= 80 and returns 'B' immediately — it never evaluates score >= 70.

Step 3 — Guard Clauses Invert the Logic #

Instead of if (valid) { doWork() }, guard clauses check for invalid conditions and return early. The function body after the guards only executes when all preconditions are met. This eliminates nesting and makes the success path obvious — it is always the last block at the deepest indentation level.

Step 4 — Optional Chaining Inside Conditions #

user?.name returns undefined (falsy) if user is null or undefined, rather than throwing a TypeError. Combined with an if statement, this safely handles missing data without needing a separate null check first.

Step 5 — Ternary Is an Expression, Not a Statement #

Unlike if, the ternary operator produces a value — it can be used directly in assignments, function arguments, and template literals. Keep ternaries simple: one condition, two short outcomes. For anything more complex, use a regular if/else block for readability.

Real-World Example: User Permission System #

// permissions.js

const ROLES = {
    ADMIN:    'admin',
    EDITOR:   'editor',
    VIEWER:   'viewer',
    GUEST:    'guest',
};

function getUserPermissions(user) {
    // Guard clauses
    if (!user)             { return { canRead: false, canWrite: false, canDelete: false }; }
    if (!user.isActive)    { return { canRead: false, canWrite: false, canDelete: false }; }

    const role = user.role ?? ROLES.GUEST;

    if (role === ROLES.ADMIN) {
        return { canRead: true, canWrite: true, canDelete: true };
    } else if (role === ROLES.EDITOR) {
        return { canRead: true, canWrite: true, canDelete: false };
    } else if (role === ROLES.VIEWER) {
        return { canRead: true, canWrite: false, canDelete: false };
    } else {
        return { canRead: false, canWrite: false, canDelete: false };
    }
}

function renderUI(user) {
    const perms = getUserPermissions(user);

    const editBtn   = perms.canWrite  ? '<button>Edit</button>'   : '';
    const deleteBtn = perms.canDelete ? '<button>Delete</button>' : '';
    const content   = perms.canRead   ? '<article>Content...</article>' : '<p>Access denied</p>';

    return `${content}${editBtn}${deleteBtn}`;
}

// Tests
const admin  = { role: 'admin',  isActive: true  };
const editor = { role: 'editor', isActive: true  };
const banned = { role: 'admin',  isActive: false };

console.log(getUserPermissions(admin));   // { canRead: true, canWrite: true, canDelete: true }
console.log(getUserPermissions(editor));  // { canRead: true, canWrite: true, canDelete: false }
console.log(getUserPermissions(banned));  // { canRead: false, canWrite: false, canDelete: false }
console.log(getUserPermissions(null));    // { canRead: false, canWrite: false, canDelete: false }

Common Mistakes #

Mistake 1 — Assignment instead of comparison inside if #

❌ Wrong — single = assigns and always evaluates truthy:

if (user = getUser()) { }   // assigns getUser() to user — always true if getUser returns anything

✅ Correct — use === for comparison:

if (user === getUser()) { } // compares — or simply: if (getUser()) { }

Mistake 2 — Missing braces causing silent logic bugs #

❌ Wrong — second line is NOT inside the if block:

if (isAdmin)
    showPanel();
    deleteButton.show();  // always runs — NOT part of the if!

✅ Correct — always use braces:

if (isAdmin) {
    showPanel();
    deleteButton.show();  // now correctly inside the if block
}

Mistake 3 — Deep nesting instead of guard clauses #

❌ Wrong — pyramid of doom, hard to read:

function process(data) {
    if (data) {
        if (data.user) {
            if (data.user.isActive) {
                // actual work buried 3 levels deep
            }
        }
    }
}

✅ Correct — guard clauses, flat and clear:

function process(data) {
    if (!data)              return;
    if (!data.user)         return;
    if (!data.user.isActive) return;
    // actual work here — no nesting
}

▶ Try It Yourself

Quick Reference #