JavaScript Operators Explained — Types, Examples and Gotchas

// --- 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