JavaScript Operators: Null Coerced to 0 by == Causes Outage

// --- Arithmetic Operators in JavaScript ---

const applePrice = 1.50;      // price of one apple
const orangePrice = 2.00;     // price of one orange
const basketSize = 12;        // total items in basket
const appleCount = 5;         // number of apples bought

// + Addition: total cost of one apple and one orange
const combinedPrice = applePrice + orangePrice;
console.log('Combined price:', combinedPrice); // 3.5

// - Subtraction: how much more an orange costs than an apple
const priceDifference = orangePrice - applePrice;
console.log('Price difference:', priceDifference); // 0.5

// * Multiplication: total cost of 5 apples
const totalAppleCost = applePrice * appleCount;
console.log('Total apple cost:', totalAppleCost); // 7.5

// / Division: average price per item
const averagePrice = (applePrice + orangePrice) / 2;
console.log('Average price:', averagePrice); // 1.75

// % Modulus: how many apples are left over if we pack them into groups of 3
const applesLeftOver = appleCount % 3;
console.log('Leftover apples after packing in 3s:', applesLeftOver); // 2

// ** Exponentiation: a 3x3 storage crate holds this many items
const crateCapacity = 3 ** 2;
console.log('Crate capacity:', crateCapacity); // 9

// ++ Increment: one more apple added to the count
let currentAppleCount = appleCount; // let because we're about to change it
currentAppleCount++;
console.log('Apple count after adding one:', currentAppleCount); // 6

// -- Decrement: one apple removed
currentAppleCount--;
console.log('Apple count after removing one:', currentAppleCount); // 5

// --- Assignment Operators in JavaScript ---

// Basic assignment: store the starting score
let playerScore = 0;
console.log('Starting score:', playerScore); // 0

// += Add and assign: player earns 10 points
playerScore += 10;
console.log('After earning 10 points:', playerScore); // 10

// += again: player earns a bonus 25 points
playerScore += 25;
console.log('After 25 point bonus:', playerScore); // 35

// -= Subtract and assign: player loses 5 points (penalty)
playerScore -= 5;
console.log('After 5 point penalty:', playerScore); // 30

// *= Multiply and assign: double score powerup activated!
playerScore *= 2;
console.log('After double score powerup:', playerScore); // 60

// /= Divide and assign: score halved due to wrong answer
playerScore /= 2;
console.log('After score halved:', playerScore); // 30

// %= Modulus and assign: only the remainder of score divided by 7 remains (a weird game rule!)
playerScore %= 7;
console.log('After modulus penalty:', playerScore); // 2  (30 divided by 7 = 4 remainder 2)

// **= Exponentiation and assign: score raised to the power of 3
playerScore **= 3;
console.log('After exponent powerup:', playerScore); // 8  (2 to the power of 3)

// ??= Nullish assignment: only sets a value if the variable is null or undefined
let playerName = null;
playerName ??= 'Guest Player'; // playerName is null, so this WILL assign
console.log('Player name:', playerName); // 'Guest Player'

let returningPlayer = 'Alex';
returningPlayer ??= 'Guest Player'; // returningPlayer has a value, so this will NOT assign
console.log('Returning player name:', returningPlayer); // 'Alex' — unchanged

// --- Comparison Operators in JavaScript ---
// Comparison operators always return true or false

const userAge = 20;
const minimumAge = 18;
const seniorAge = 65;
const inputAge = '20'; // this is a STRING, not a number — important!

// == Loose equality: compares values, NOT types (type coercion happens!)
console.log('Loose equality (number vs string):', userAge == inputAge); // true — JS converts '20' to 20

// === Strict equality: compares value AND type (no type coercion)
console.log('Strict equality (number vs string):', userAge === inputAge); // false — different types!
console.log('Strict equality (number vs number):', userAge === 20); // true — same value AND type

// != Loose inequality
console.log('Loose not-equal:', userAge != inputAge); // false — they ARE loosely equal

// !== Strict inequality (use this one!)
console.log('Strict not-equal:', userAge !== inputAge); // true — different types, so they are NOT strictly equal

// > Greater than
console.log('Is user old enough?', userAge > minimumAge); // true (20 > 18)

// < Less than
console.log('Is user under senior age?', userAge < seniorAge); // true (20 < 65)

// >= Greater than or equal to
console.log('Is user at least minimum age?', userAge >= minimumAge); // true (20 >= 18)

// <= Less than or equal to
console.log('Is user at or below senior age?', userAge <= seniorAge); // true (20 <= 65)

// Real-world usage: checking entry eligibility
if (userAge >= minimumAge) {
  console.log('Access granted — user meets the age requirement.');
} else {
  console.log('Access denied — user is too young.');
}

// --- Logical Operators in JavaScript ---

const hasValidTicket = true;
const hasVipPass = false;
const isAccountVerified = true;
const userAge = 17;
const minimumAge = 18;
let isDarkModeOn = false;

// && AND: BOTH conditions must be true
// Can user enter? They need a valid ticket AND must be old enough
const canEnterEvent = hasValidTicket && (userAge >= minimumAge);
console.log('Can enter event (ticket + age):', canEnterEvent); // false — age check fails

// What if the user WAS old enough?
const isOldEnough = true;
const canEnterIfOlderUser = hasValidTicket && isOldEnough;
console.log('Can older user enter with ticket:', canEnterIfOlderUser); // true — both pass

// || OR: at least ONE condition must be true
// Can user access premium content? They need EITHER a ticket OR a VIP pass
const canAccessPremium = hasValidTicket || hasVipPass;
console.log('Can access premium content:', canAccessPremium); // true — ticket alone is enough

// ! NOT: flips the boolean value
console.log('Is dark mode currently OFF?', !isDarkModeOn); // true — it's currently false, so !false = true

// Toggle dark mode using !
isDarkModeOn = !isDarkModeOn; // flip it from false to true
console.log('Dark mode after toggle:', isDarkModeOn); // true

// ?? Nullish Coalescing: use default only when value is null or undefined
const userDisplayName = null;
const displayName = userDisplayName ?? 'Anonymous User'; // null triggers the default
console.log('Display name:', displayName); // 'Anonymous User'

const savedUsername = 'techdev_99';
const safeDisplayName = savedUsername ?? 'Anonymous User'; // has a value, no default needed
console.log('Safe display name:', safeDisplayName); // 'techdev_99'

// ?. Optional chaining: safely access a property that might not exist
const userProfile = null;
// Without ?. this would CRASH with: TypeError: Cannot read properties of null
const profileCity = userProfile?.address?.city;
console.log('Profile city (safe access):', profileCity); // undefined — no crash!

// Combining && and || in a real check
const canPostComment = isAccountVerified && (hasValidTicket || hasVipPass);
console.log('Can post comment (verified + ticket/VIP):', canPostComment); // true

// --- Ternary and Conditional Operators ---

const userAge = 17;
const minimumAge = 18;

// Ternary: condition ? ifTrue : ifFalse
const canAccess = userAge >= minimumAge ? 'Access granted' : 'Access denied';
console.log(canAccess); // 'Access denied'

// Using ternary in a return statement
function getGreeting(isMorning) {
  return isMorning ? 'Good morning' : 'Good evening';
}
console.log(getGreeting(true));  // 'Good morning'
console.log(getGreeting(false)); // 'Good evening'

// Nested ternary (use sparingly!)
const score = 85;
const grade = score >= 90 ? 'A' : score >= 80 ? 'B' : score >= 70 ? 'C' : 'D';
console.log('Grade:', grade); // 'B'

// Common pitfall: forgetting precedence — parentheses clarify
const x = 5, y = 10;
const result = (x > y) ? x : y; // result = 10 (max)
// Without parentheses around the condition, expression might be parsed incorrectly

// Avoid: assignment inside ternary
// const a = condition ? (b = 5) : (b = 10); // confusing, prefer if-else

// --- Odd Operators in JavaScript ---

// Comma operator: evaluates both, returns second
let a = (1, 2, 3);
console.log('a is:', a); // 3 (last value)

// Often used in for loops
for (let i = 0, j = 5; i < j; i++, j--) {
  console.log(i, j);
}
// Outputs: 0 5, 1 4, 2 3

// delete operator
const user = { name: 'Alice', age: 30 };
delete user.age;
console.log(user); // { name: 'Alice' }

// delete on array — leaves hole
const arr = [1, 2, 3];
delete arr[1];
console.log(arr); // [1, empty, 3] — length still 3

// typeof operator
console.log(typeof 'hello'); // 'string'
console.log(typeof 42);      // 'number'
console.log(typeof true);    // 'boolean'
console.log(typeof null);    // 'object' — known bug
console.log(typeof undefined); // 'undefined'
console.log(typeof []);      // 'object' — use Array.isArray()

// instanceof operator
const date = new Date();
console.log(date instanceof Date); // true
console.log(date instanceof Object); // true (Date extends Object)

// Grouping operator - clarify precedence
const result = (2 + 3) * 4; // 20, without parentheses would be 2 + 12 = 14
console.log(result); // 20