JS If Else

JavaScript if...else: Conditional Branching & Guard Clauses

Conditional statements (if, else if, else) execute different blocks of code based on boolean conditions. Modern JavaScript favors guard clauses and short-circuit evaluation to reduce nested if statements.

Guard Clause vs Nested Branching Architecture

flowchart TD
    subgraph GuardClause ["Guard Clause Style (Flat & Readable)"]
    In1["Function Entry"] --> Guard1{"Invalid Input?"}
    Guard1 -- "Yes" --> RetErr["Return Error / Early Exit"]
    Guard1 -- "No" --> Guard2{"Unauthorized?"}
    Guard2 -- "Yes" --> RetAuth["Return Auth Error"]
    Guard2 -- "No" --> ExecCore["Execute Main Business Logic"]
    end

Conditional Patterns Comparison

Practical Code Example

// Demonstrating Guard Clauses vs Nested If-Else

// 1. Un-nested Clean Function using Guard Clauses
function processPayment(user, amount) {
  // Guard Clause 1: Validate User Existence
  if (!user) {
    console.error("Error: User session not found.");
    return false;
  }

  // Guard Clause 2: Validate Amount
  if (typeof amount !== "number" || amount <= 0) {
    console.error("Error: Invalid payment amount.");
    return false;
  }

  // Guard Clause 3: Check Account Balance
  if (user.balance < amount) {
    console.error("Error: Insufficient funds.");
    return false;
  }

  // Main Happy Path Logic (Flat indentation level!)
  user.balance -= amount;
  console.log(`Payment of \$${amount} processed! New Balance: \$${user.balance}`);
  return true;
}

const account = { balance: 500 };
processPayment(account, 150);
processPayment(account, 1000); // Trigger guard clause

Best Practices & Gotchas

• Return Early (Guard Clauses): Check error conditions at the top of functions and return immediately. This keeps main logic at the root indentation level.
• Always Group Blocks with Curly Braces {}: Avoid single-line unbraced if (cond) doSomething(); to prevent logic bugs when adding lines later.
• Do Not Abuse Ternary Operators: Keep ternary expressions simple (cond ? val1 : val2). Avoid nesting ternary operators (a ? b ? c : d : e).

Self-Check Challenge

Refactor a nested if (a) { if (b) { doSomething(); } } into a single if statement using logical AND (&&).