Conditionals & Control Flow — Teaching Code to Make Decisions

1. Learning Objective

Until now, your JavaScript code has executed strictly from top to bottom, running every single line in order. Real software doesn't work like that! Real software makes decisions based on data.

In this lesson, you will learn how to control the flow of execution using conditionals and logic:

• Understand Control Flow and how JavaScript decides which code runs and which code gets skipped.
• Master Comparison Operators (===, !==, >, <, >=, <=) and understand why loose equality (==) is dangerous.
• Use if, else if, and else blocks to branch execution.
• Master the exact list of 8 Falsy values in JavaScript and understand Truthy evaluation.
• Combine conditions with Logical Operators (&&, ||, !) and leverage Short-Circuit Evaluation.
• Use the Nullish Coalescing Operator (??) vs the OR operator (||) for safe default values.
• Write concise inline decisions using the Ternary Operator (? :).
• Handle multi-case branching using switch statements and know when to use them over if/else.

2. Prerequisites Revision

Before diving in, let's quickly review the core concepts from previous lessons that conditionals build upon:

3. Concept Explanation (From Scratch)

What is "Control Flow"?

By default, JavaScript reads and executes your script line by line from top to bottom. This sequential execution is called default control flow. Conditionals are special structures that interrupt this straight-line path, allowing your program to take different branches based on whether a condition is true or false.

1. Comparison Operators

Before making a decision, JavaScript needs to compare values. A comparison expression always evaluates to a Boolean: true or false.

2. The if, else if, and else Decision Ladder

The basic structure for decision-making in JavaScript:

if (condition) {
  // Runs if condition is true
} else if (anotherCondition) {
  // Runs if first condition was false AND anotherCondition is true
} else {
  // Runs if all previous conditions were false
}

3. Truthy and Falsy Values

In JavaScript, every single value has an inherent boolean equivalent when converted to a boolean (a process called coercion).

4. Logical Operators: &&, ||, !

Logical operators let you combine multiple conditions together:

• && (AND): Returns true ONLY if ALL conditions are true.
• || (OR): Returns true if AT LEAST ONE condition is true.
• ! (NOT): Flips boolean value. !true becomes false. Double bang !!val converts any value to its actual boolean representation!

5. Short-Circuit Evaluation

JavaScript evaluates logical expressions from left to right and stops as soon as the outcome is guaranteed:

• In A && B: If A is falsy, JS stops immediately and returns A. It never evaluates B!
• In A || B: If A is truthy, JS stops immediately and returns A. It never evaluates B!

6. Nullish Coalescing Operator (??)

Introduced in ES2020, ?? returns the right side ONLY if the left side is null or undefined. Unlike ||, it does NOT treat 0 or "" as missing!

const userScore = 0;

// Problem with OR (||): treats 0 as falsy and overwrites valid score 0!
const score1 = userScore || 10; // score1 is 10 (Wrong!)

// Solution with Nullish Coalescing (??): keeps 0!
const score2 = userScore ?? 10; // score2 is 0 (Correct!)

7. Ternary Operator (? :)

A shorthand inline replacement for a simple if/else block that returns a value:

// Syntax: condition ? valueIfTrue : valueIfFalse
const status = age >= 18 ? "Adult" : "Minor";

8. The switch Statement

When you have a single variable that could match many exact discrete values (e.g. user role, order status, days of the week), switch provides clean syntax:

switch (orderStatus) {
  case "pending":
    console.log("Order placed.");
    break;
  case "shipped":
    console.log("Order on the way.");
    break;
  case "delivered":
    console.log("Order complete.");
    break;
  default:
    console.log("Unknown status.");
}

4. Mental Model & Analogies

5. Visual Flowcharts & Tables

Comparison: Loose Equality (==) vs Strict Equality (===)

6. Code Examples: Basic to Industry Level

Example 1: Basic if / else if / else

function calculateDiscount(cartTotal) {
  // Line 1: Check if total qualifies for top-tier 20% discount
  if (cartTotal >= 100) {
    return cartTotal * 0.20;
  } 
  // Line 2: Check if total qualifies for mid-tier 10% discount
  else if (cartTotal >= 50) {
    return cartTotal * 0.10;
  } 
  // Line 3: Fallback for purchases below $50
  else {
    return 0;
  }
}

console.log(calculateDiscount(120)); // Output: 24 (20%)
console.log(calculateDiscount(75));  // Output: 7.5 (10%)
console.log(calculateDiscount(30));  // Output: 0

Example 2: Modern Early Return Pattern (Guard Clauses)

Instead of deeply nested if/else blocks, professional software engineers write clean Guard Clauses:

function processUserPayment(user, amount) {
  // Guard Clause 1: Validate input existence
  if (!user) {
    return { success: false, reason: "No user provided" };
  }

  // Guard Clause 2: Check active status
  if (!user.isActive) {
    return { success: false, reason: "Account inactive" };
  }

  // Guard Clause 3: Verify funds
  if (user.balance < amount) {
    return { success: false, reason: "Insufficient balance" };
  }

  // Main Happy Path (un-nested!)
  user.balance -= amount;
  return { success: true, newBalance: user.balance };
}

7. Visual Execution & JS Engine Mechanics

8. Common Mistakes & How to Fix Them

// WRONG: Assigns 5 to x, which evaluates to 5 (truthy!), so block ALWAYS runs!
let x = 0;
if (x = 5) {
  console.log("x is 5!"); // Always executes!
}

// CORRECT: Use strict equality comparison
if (x === 5) {
  console.log("x is 5!");
}

// WRONG: If user set custom padding to 0, 0 is falsy, so it resets to 20!
const userPadding = 0;
const padding = userPadding || 20; // padding becomes 20!

// CORRECT: Use Nullish Coalescing (??) which respects 0 and ""
const safePadding = userPadding ?? 20; // safePadding is 0!

// WRONG: Missing break causes execution to fall through to next case!
switch (role) {
  case "admin":
    enableAdminTools();
    // Missing break!
  case "user":
    enableUserTools(); // Admin gets this too accidentally!
    break;
}

9. Interview Perspective & Tricky Questions

10. Industry Best Practices

• Rule 1: Always use === and !==. Never use loose == unless explicitly checking for both null and undefined via val == null.
• Rule 2: Prefer Guard Clauses over Nested if/else. Keep code flat and easy to read.
• Rule 3: Use ?? for Default Fallbacks. Protect user options where 0 or "" are valid choices.
• Rule 4: Keep Boolean expressions readable. Extract complex conditions into well-named boolean variables:

  // Hard to read:
  if (user.age >= 18 && user.hasActiveSubscription && !user.isBanned) { ... }
  
  // Clean & Self-Documenting:
  const canAccessPremiumContent = user.age >= 18 && user.hasActiveSubscription && !user.isBanned;
  if (canAccessPremiumContent) { ... }

11. Real-World Use Cases in Modern Stacks

1. React & Next.js Conditional Rendering

// In React JSX: Short-circuiting with &&
function DashboardHeader({ user }) {
  return (
    <header>
      <h1>Welcome back, {user.name}</h1>
      {/* Renders badge ONLY if user is admin */}
      {user.isAdmin && <span className="admin-badge">Admin</span>}
      
      {/* Ternary for state-based UI */}
      {user.isPro ? <ProFeatures /> : <UpgradeBanner />}
    </header>
  );
}

2. Node.js & Express Authentication Middleware

// Express API route auth guard
function requireAuth(req, res, next) {
  const authHeader = req.headers.authorization;

  // Guard Clause: missing token
  if (!authHeader) {
    return res.status(401).json({ error: "Access denied. No token provided." });
  }

  // Guard Clause: invalid token syntax
  if (!authHeader.startsWith("Bearer ")) {
    return res.status(400).json({ error: "Invalid token format." });
  }

  next(); // Token OK -> proceed to controller
}

Interactive JS Playground: Test Conditionals Live

12. Practice Questions & Exercises

Test your knowledge with these 10 practice questions (Answers at the end of the session!):

1. What is the boolean evaluation of Boolean("0")?
2. What does 5 > 3 && 2 < 1 evaluate to?
3. What is the difference between 5 == "5" and 5 === "5"?
4. What are the 8 falsy values in JavaScript?
5. What will const x = null ?? "default"; store in x?
6. What will const y = "" || "fallback"; store in y?
7. Convert this if/else statement into a ternary expression:
   let msg; if (score >= 50) msg = "Pass"; else msg = "Fail";
8. Why does if ([]) console.log("Hi"); print "Hi"?
9. What happens if you omit the break statement inside a switch case?
10. What does !true evaluate to? What about !!100?

13. Mini Project: Interactive E-Commerce Discount & Eligibility Calculator

Use the live interactive tool below to test how real-world nested decision rules calculate customer totals:

Interactive Self-Assessment

Concept Quiz

Fill-in-the-Blank Retrieval Practice

14. Lesson Summary

• Conditionals control the branch path of execution based on boolean truth values.
• Always use strict equality === and strict inequality !==.
• Memorize the 8 Falsy values: false, 0, -0, 0n, "", null, undefined, NaN. Everything else is truthy (including [] and {}!).
• Use Guard Clauses to keep functions clean and avoid nested if/else callback hell.
• Use ?? when 0 or "" are valid user inputs that shouldn't be overwritten by fallbacks.

15. Quick 5-Minute Revision Notes

16. Cumulative Challenge