null vs undefined in JavaScript — What They Mean and When to Use Each

// ── CASE 1: Variable declared but never assigned ──────────────────────────
let userAge;  // JavaScript quietly sets this to undefined
console.log('Declared but unassigned:', userAge);  // undefined

// ── CASE 2: Accessing an object property that does not exist ──────────────
const userProfile = {
  firstName: 'Maria',
  lastName: 'Santos'
};
// We never defined an email property — JavaScript returns undefined for it
console.log('Missing property:', userProfile.email);  // undefined

// ── CASE 3: A function with no return statement ───────────────────────────
function greetUser(name) {
  // This function does work but forgets to return a value
  const message = `Hello, ${name}!`;
  // <-- no return statement here
}
const greeting = greetUser('Carlos');
console.log('No-return function result:', greeting);  // undefined

// ── CASE 4: Accessing an array index that doesn't exist ───────────────────
const colors = ['red', 'green', 'blue'];  // indexes 0, 1, 2 exist
console.log('Out-of-bounds index:', colors[10]);  // undefined

// ── CASE 5: A function parameter that was never passed ────────────────────
function displayScore(playerName, score) {
  // If score is not passed, JavaScript sets it to undefined automatically
  console.log(`${playerName} scored: ${score}`);
}
displayScore('Alex');  // score is never passed in

// ── SCENARIO: A user authentication system ───────────────────────────────

// Before login: we deliberately set currentUser to null.
// This means 'no user is logged in right now' — an intentional empty state.
let currentUser = null;
console.log('Before login, currentUser:', currentUser);  // null

// A function that simulates fetching a user from a database
function findUserById(userId) {
  const database = [
    { id: 1, name: 'Priya Nair',   role: 'admin'  },
    { id: 2, name: 'Jake Thompson', role: 'viewer' }
  ];

  const foundUser = database.find(user => user.id === userId);

  // If the user does not exist in the database, we return null deliberately.
  // This tells the caller: 'I looked — there is genuinely nobody here.'
  return foundUser || null;
}

// User 1 exists
currentUser = findUserById(1);
console.log('After finding user 1:', currentUser);  // { id: 1, name: 'Priya Nair', role: 'admin' }

// User 99 does not exist — we get null back intentionally
const missingUser = findUserById(99);
console.log('Looking for user 99:', missingUser);  // null

// ── Checking for null in a real condition ─────────────────────────────────
if (missingUser === null) {
  console.log('No user found — show a 404 page or an error message.');
}

// ── Setting to null on logout ─────────────────────────────────────────────
function logout() {
  currentUser = null;  // Deliberately clearing the value on logout
  console.log('User logged out. currentUser is now:', currentUser);
}
logout();

// ── LOOSE EQUALITY (==) — Full of surprises ───────────────────────────────
console.log('--- Loose Equality (==) ---');
console.log(null == undefined);   // true  — they ARE loosely equal
console.log(null == 0);           // false — null does NOT loosely equal zero
console.log(null == false);       // false — null does NOT loosely equal false
console.log(null == '');          // false — null does NOT loosely equal empty string
console.log(undefined == false);  // false — undefined does NOT loosely equal false

// ── STRICT EQUALITY (===) — No surprises ─────────────────────────────────
console.log('\n--- Strict Equality (===) ---');
console.log(null === undefined);  // false — different types, different values
console.log(null === null);       // true  — null is strictly equal to itself
console.log(undefined === undefined); // true — same deal

// ── THE ONE GOOD USE OF LOOSE NULL CHECK ──────────────────────────────────
// This pattern checks: 'is this value either null OR undefined?'
// Very useful when an API might return one or the other.
console.log('\n--- Practical Null Check Pattern ---');

function processApiResponse(responseValue) {
  // This single check catches both null and undefined safely
  if (responseValue == null) {
    console.log('No value present (was null or undefined) — using default.');
    return 'Default display text';
  }
  return responseValue;
}

console.log(processApiResponse(null));       // null triggers the guard
console.log(processApiResponse(undefined));  // undefined triggers the guard too
console.log(processApiResponse('Hello!'));   // real value passes through

// ── typeof REVEALS THE DIFFERENCE ────────────────────────────────────────
// This is a famous JavaScript quirk worth knowing
console.log('\n--- typeof Results ---');
console.log(typeof null);       // 'object'  <-- historical bug in JavaScript!
console.log(typeof undefined);  // 'undefined'

// ── SCENARIO: Working with a user profile from an API ────────────────────

const loggedInUser = {
  name: 'Sofia Reyes',
  address: {
    city: 'Barcelona'
    // Note: no 'zipCode' property — it's missing entirely
  },
  subscriptionLevel: null  // User exists but has no active subscription (intentional null)
};

const guestUser = null;  // No user is logged in (intentional null)

// ── OPTIONAL CHAINING (?.) — Safe property access ────────────────────────
// Without ?., accessing guestUser.name would throw a TypeError and crash your app.
// With ?., if guestUser is null/undefined, it short-circuits and returns undefined safely.
console.log('Guest city:', guestUser?.address?.city);      // undefined (no crash!)
console.log('User city:', loggedInUser?.address?.city);    // 'Barcelona'
console.log('User zip:', loggedInUser?.address?.zipCode);  // undefined (property missing)

// ── NULLISH COALESCING (??) — Safe fallback values ────────────────────────
// ?? only kicks in when the value is null OR undefined.
// Unlike ||, it does NOT replace 0, false, or empty string.
const displayCity = loggedInUser?.address?.city ?? 'City not provided';
console.log('Display city:', displayCity);  // 'Barcelona'

const displayZip = loggedInUser?.address?.zipCode ?? 'ZIP not provided';
console.log('Display ZIP:', displayZip);    // 'ZIP not provided'

const subscriptionLabel = loggedInUser.subscriptionLevel ?? 'Free tier';
console.log('Subscription:', subscriptionLabel);  // 'Free tier' (because value was null)

// ── WHY ?? IS SAFER THAN || FOR NUMBERS ───────────────────────────────────
const playerScore = 0;  // A legitimate score of zero

// BUG: || treats 0 as falsy and replaces it — wrong!
const scoreWithOR = playerScore || 'No score yet';
console.log('Score with ||:', scoreWithOR);  // 'No score yet' <-- WRONG! 0 is a real score

// CORRECT: ?? only replaces null/undefined, leaves 0 alone
const scoreWithNullish = playerScore ?? 'No score yet';
console.log('Score with ??:', scoreWithNullish);  // 0 <-- Correct!

// ── DEFAULT PARAMETERS — Handle undefined, NOT null ──────────────────────
function createEmailGreeting(recipientName = 'Valued Customer') {
  // Default only fires when recipientName is undefined, not when it's null
  return `Dear ${recipientName}, thank you for your order!`;
}

console.log(createEmailGreeting('James'));    // Default not used — real name provided
console.log(createEmailGreeting());          // Default used — no argument passed (undefined)
console.log(createEmailGreeting(null));      // Default NOT used — null is explicit!