Making Decisions: if, else & Ternaries

Variables: const, let & var (The Box Metaphor)

Learn how variables act as labeled containers for data using const, let, and var to manage lexical scope and reassignment safely in modern applications.

1. Controlling Code Execution

Conditionals allow your application to make decisions at runtime, executing specific code blocks based on user permissions, state, or input values.

2. Why It Matters

Clean conditional branching prevents nested callback spaghetti and makes business logic obvious and maintainable.

3. If, Else If, and Else

Standard conditional branching uses if, else if, and else:

const userRole = "editor";

if (userRole === "admin") {
  console.log("Full control access granted.");
} else if (userRole === "editor") {
  console.log("Content editing access granted.");
} else {
  console.log("Read-only access granted.");
}

4. The Concise Ternary Operator (? :)

For quick two-way assignments or inline return expressions, use the ternary operator (condition ? exprIfTrue : exprIfFalse):

const age = 20;

// Standard if/else assignment (Verbose)
let statusMessage;
if (age >= 18) {
  statusMessage = "Adult";
} else {
  statusMessage = "Minor";
}

// Equivalent Ternary Assignment (Concise 1-liner!)
const status = age >= 18 ? "Adult" : "Minor";
console.log(status); // "Adult"

5. Logical Operators (&&, ||, ??)

Combine conditions using logical operators:

• && (AND): Both conditions must be truthy.
• || (OR): At least one condition must be truthy.
• ?? (Nullish Coalescing): Provides a fallback value ONLY if the left side is null or undefined (unlike ||, which triggers on all falsy values like 0 or "").

const userCount = 0;

const countOrFallback1 = userCount || 10; // Returns 10 (because 0 is falsy!)
const countOrFallback2 = userCount ?? 10; // Returns 0  (because 0 is NOT nullish!)

6. Common Mistakes

• Overusing Nested Ternaries: Chaining multiple ternaries (a ? b : c ? d : e) makes code impossible to read. Use if/else or a switch statement when handling 3+ branches.
• Confusing || with ??: Using || for default values can accidentally overwrite valid falsy inputs like 0 or false. Use ?? when 0 or false are valid values!

7. Next Steps

Use ternaries for simple assignments and if/else for multi-step logic. Next, let's solve the confusion between undefined and not defined!