JavaScript Ternary Precedence — Why Parentheses Matter

// A simple game scenario — checking if the player is still alive

const playerHealth = 45; // The player's current health points
const minimumHealth = 0; // Health at or below this means game over

// The 'if' keyword starts the conditional.
// The condition (playerHealth > minimumHealth) is evaluated — is 45 > 0? YES, so it's true.
// Because it's true, the code inside the curly braces runs.
if (playerHealth > minimumHealth) {
  console.log("Player is alive. Keep fighting!");
  // This line also runs because it's inside the same block
  console.log("Current health: " + playerHealth);
}

// This line is OUTSIDE the if block — it always runs, no matter what
console.log("Game loop continues...");

// Now let's see what happens when the condition is FALSE
const secondPlayerHealth = 0;

if (secondPlayerHealth > minimumHealth) {
  // 0 > 0 is FALSE — so JavaScript skips everything in here
  console.log("This will NOT print because the condition is false.");
}

console.log("Second player check complete.");

// Converting a numeric exam score into a letter grade
// This is a perfect use case for if / else if / else — multiple distinct outcomes

const examScore = 74; // The student's score out of 100

if (examScore >= 90) {
  // Is 74 >= 90? No. JavaScript skips this block and checks the next condition.
  console.log("Grade: A — Excellent work!");
} else if (examScore >= 80) {
  // Is 74 >= 80? No. Skip and check next.
  console.log("Grade: B — Great job!");
} else if (examScore >= 70) {
  // Is 74 >= 70? YES. JavaScript runs this block and stops checking the rest.
  console.log("Grade: C — Good effort, room to grow.");
} else if (examScore >= 60) {
  // This never even gets evaluated because the block above already matched
  console.log("Grade: D — Consider reviewing the material.");
} else {
  // This is the safety net — catches any score below 60
  console.log("Grade: F — Please see your instructor.");
}

// Demonstrating the 'top-down, first match wins' rule
const bonusScore = 95;

console.log("\n--- Bonus Score Check ---");

if (bonusScore >= 70) {
  // Is 95 >= 70? YES — this matches FIRST, so everything below is ignored
  console.log("Passed! (Matched the >= 70 condition)");
} else if (bonusScore >= 90) {
  // This would also be true, but JavaScript never gets here
  console.log("This will NEVER print, even though 95 >= 90 is true.");
}

// Scenario: An e-commerce site applies a discount for premium members

const isPremiumMember = true; // Whether the user has a paid membership
const cartTotal = 120;        // The total cost of items in the cart

// THE LONG WAY using if/else
let discountPercentageLong;
if (isPremiumMember) {
  discountPercentageLong = 20; // 20% off for premium members
} else {
  discountPercentageLong = 5;  // 5% off for everyone else
}
console.log("Long way discount: " + discountPercentageLong + "%");

// THE SHORT WAY using the ternary operator
// Read as: 'isPremiumMember? Then 20, Otherwise 5'
const discountPercentage = isPremiumMember ? 20 : 5;
console.log("Ternary discount: " + discountPercentage + "%");

// Ternary is great for embedding decisions directly in a string
const discountedTotal = cartTotal - (cartTotal * discountPercentage / 100);
console.log(
  "Welcome, " + (isPremiumMember ? "Premium Member" : "Guest") +
  "! Your total after discount: $" + discountedTotal
);

// Example of what NOT to do — nested ternaries are hard to read
// Don't write this:
// const label = score >= 90 ? 'A' : score >= 80 ? 'B' : score >= 70 ? 'C' : 'F';
// Use if/else if instead when you have more than 2 outcomes

// A coffee shop order system — routing to the correct preparation method
// Perfect use of switch: one variable, multiple specific values to check

const customerOrder = "latte"; // The drink the customer ordered

switch (customerOrder) {
  case "espresso":
    // Does customerOrder === 'espresso'? No. Skip.
    console.log("Pulling a double shot of espresso.");
    break; // Stop here — don't run any other cases

  case "latte":
    // Does customerOrder === 'latte'? YES. Run this block.
    console.log("Pulling espresso shot and steaming milk for a latte.");
    break; // Without this 'break', JavaScript would fall through to 'cappuccino'!

  case "cappuccino":
    console.log("Pulling espresso shot and adding thick foam for a cappuccino.");
    break;

  case "americano":
    console.log("Pulling espresso shot and adding hot water.");
    break;

  default:
    // Catches anything that didn't match any case above
    console.log("Sorry, we don't have '" + customerOrder + "' on the menu.");
    break; // Good habit to include break in default too
}

// INTENTIONAL FALL-THROUGH — multiple cases sharing the same logic
// Both 'mocha' and 'hot chocolate' need the chocolate syrup step
const warmDrink = "mocha";

console.log("\n--- Warm Drink Prep ---");

switch (warmDrink) {
  case "mocha":
    // No break here — falls through to 'hot chocolate' on purpose
  case "hot chocolate":
    console.log("Adding chocolate syrup to " + warmDrink + ".");
    break;
  default:
    console.log("No chocolate needed for this drink.");
}

// Demonstrating truthy/falsy coercions and logical short-circuiting

// What passes an if condition?
if ({}) console.log("Empty object is truthy");   // prints
if ([]) console.log("Empty array is truthy");     // prints
if ("false") console.log("String 'false' is truthy"); // prints
if (0) console.log("Zero is falsy");            // won't print
if (undefined) console.log("undefined is falsy"); // won't print

// The common trap: checking array length
const items = [];
if (items.length) {
  console.log("We have items");  // 0 is falsy — won't run
} else {
  console.log("No items");       // runs
}

// Logical OR for default values
const userName = '';
const displayName = userName || 'Guest';
console.log('Display name:', displayName); // Guest — empty string is falsy

// BUT: if userName could be an empty string meaning legit empty,
// this would incorrectly default. Use ?? (nullish coalescing) instead.
const realName = userName ?? 'Guest';
console.log('Real name:', realName); // '' (empty string) – not overridden

// Logical AND for conditional execution
const isLoggedIn = true;
isLoggedIn && console.log("User is logged in"); // prints

// Reminder: && and || don't return booleans — they return operand values
const value = (false && 42) || 100;
console.log('Value:', value); // 100, not true