null vs undefined — 'Cannot read property of null' Crash

// ── 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();

// ── SERIALIZATION DEMO: undefined vs null ─────────────────────────────────

const user = {
  name: 'Ananya',
  phone: null,             // explicitly no phone number
  profilePic: undefined,   // not set
  age: 28
};

// JSON.stringify will remove profilePic entirely, but keep phone as null
const json = JSON.stringify(user);
console.log('Serialized JSON:', json);
// Output: {"name":"Ananya","phone":null,"age":28}

// ── API RESPONSE DESIGN ───────────────────────────────────────────────────
// Backend should use null for missing values to preserve structure
const goodResponse = {
  user: { name: 'Bob', email: null }  // email field present but null
};

const badResponse = {
  user: { name: 'Bob' }  // email completely missing → undefined on client
};

// Client-side handling
const clientEmail = goodResponse.user.email ?? 'No email on file';
console.log('Good response email:', clientEmail);  // 'No email on file'

// This would crash if email was undefined and we accessed a property on it
// But with ?? we are safe

// ── PARSING: JSON.parse restores null exactly, undefined cannot exist in JSON ─
const parsed = JSON.parse('{"a": null}');
console.log('Parsed null:', parsed.a);  // null
console.log('Has own property a?', parsed.hasOwnProperty('a'));  // true

const parsedMissing = JSON.parse('{}');
console.log('Missing property:', parsedMissing.a);  // undefined

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

// Quick type checks
console.log(typeof undefined);   // 'undefined'
console.log(typeof null);        // 'object' — never use for null detection!

// Correct null detection
console.log(null === null);      // true

// Loose null/undefined guard
console.log(null == undefined);  // true (useful for combined check)

// JSON behavior
console.log(JSON.stringify({a: undefined, b: null}));  // '{"b":null}'

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

// ── THIS THROWS A SYNTAX ERROR ───────────────────────────────────────────
// Uncomment the line below to see the error:
// const result = null ?? 'fallback' || 'default';  // SyntaxError: Cannot mix '??' and '||' without parentheses

// ── CORRECT USAGE WITH PARENTHESES ───────────────────────────────────────
// Option 1: Evaluate nullish coalescing first
const option1 = (null ?? 'fallback') || 'default';
console.log('Option 1:', option1);  // 'fallback' (?? returns 'fallback', then || sees truthy)

// Option 2: Evaluate OR first
const option2 = null ?? ('fallback' || 'default');
console.log('Option 2:', option2);  // 'fallback' (|| returns 'fallback', then ?? sees truthy)

// ── MIXING WITH && ───────────────────────────────────────────────────────
// Also throws error:
// const invalid = value && value ?? 'default';  // SyntaxError

// Correct: parenthesize
const config = { timeout: 0 };
const timeout = (config.timeout ?? 3000) && config.timeout;
console.log('Timeout:', timeout);  // 0 (?? returns 0, && evaluates 0 to falsy, returns 0)

// ── REAL-WORLD EXAMPLE: SAFE ACCESS WITH FALLBACK ────────────────────────
function getUserDisplayName(user) {
  // Without parentheses: error
  // return user?.name ?? 'Guest' || 'Unknown';  // SyntaxError

  // Correct: clarify intent
  return (user?.name ?? 'Guest') || 'Unknown';
}

console.log(getUserDisplayName({ name: 'Alice' }));  // 'Alice'
console.log(getUserDisplayName(null));               // 'Guest' (?? gives 'Guest', then || uses it)
console.log(getUserDisplayName({ name: '' }));        // 'Unknown' (?? gives '', which is falsy, so || falls back to 'Unknown')

// ── OPERATOR COMPARISON ─────────────────────────────────────────────────
const testValues = [null, undefined, 0, '', false, NaN];

console.log('Value → || result | ?? result');
console.log('─'.repeat(40));

testValues.forEach(value => {
  const orResult = value || 'default';
  const nullishResult = value ?? 'default';
  console.log(`${String(value).padEnd(10)} ${orResult.padEnd(10)} ${nullishResult}`);
});

// ── PRACTICAL EXAMPLE: USER SETTINGS ────────────────────────────────────
const userSettings = {
  volume: 0,        // User explicitly set volume to 0 (muted)
  nickname: '',     // User doesn't want a nickname
  notifications: false  // User disabled notifications
};

// BAD: Using || replaces valid falsy values
const displayVolume = userSettings.volume || 50;  // 50! But user set volume to 0
const displayNickname = userSettings.nickname || 'Player';  // 'Player'! But user left it empty
const displayNotifications = userSettings.notifications || true;  // true! But user disabled

console.log(`\nVolume (||): ${displayVolume} (expected 0)`);
console.log(`Nickname (||): ${displayNickname} (expected '')`);
console.log(`Notifications (||): ${displayNotifications} (expected false)`);

// CORRECT: Using ?? preserves falsy values
const correctVolume = userSettings.volume ?? 50;  // 0
const correctNickname = userSettings.nickname ?? 'Player';  // ''
const correctNotifications = userSettings.notifications ?? true;  // false

console.log(`\nVolume (??): ${correctVolume} (correct 0)`);
console.log(`Nickname (??): ${correctNickname} (correct '')`);
console.log(`Notifications (??): ${correctNotifications} (correct false)`);

// ── SCENARIO 1: API response with unexpected null ─────────────────────────
const apiResponse = {
  user: { name: 'Alice' },
  settings: null  // backend sent null instead of omitting
};

// SAFE: Optional chaining + nullish coalescing
const theme = apiResponse.settings?.theme ?? 'light';
console.log('Theme:', theme);  // 'light' — no crash

// ── SCENARIO 2: Callback might be undefined ───────────────────────────────
function performAction(onComplete) {
  // Do something...
  // SAFE: Only call if it's a function
  if (typeof onComplete === 'function') {
    onComplete();
  }
}

performAction();           // No crash
performAction(() => console.log('Done!')); // Works

// ── SCENARIO 3: Frontend expecting a missing field ─────────────────────────
const databaseRecord = { id: 1, name: 'Bob' }; // no 'email' field

// SAFE: Provide default
const email = databaseRecord.email ?? 'No email on file';
console.log('Email:', email);  // 'No email on file'

// ── LOGGING PATTERN FOR DEBUGGING ─────────────────────────────────────────
function safeDeepAccess(obj, path) {
  return path.split('.').reduce((acc, key) => {
    if (acc == null) return undefined;
    return acc[key];
  }, obj);
}

console.log('Safe deep access:', safeDeepAccess(apiResponse, 'user.profile.name')); // undefined

// ── EXERCISE 1: Safe Property Access ─────────────────────────────────────
// Given an API response that may be null or have missing nested fields,
// safely display the user's city. If any part is missing, show 'Unknown'.

const apiResponse = { user: { address: null } };  // or could be { user: null }
// Your code:
const city = apiResponse?.user?.address?.city ?? 'Unknown';
console.log('Exercise 1:', city);  // 'Unknown'

// ── EXERCISE 2: API Response Fallback ─────────────────────────────────────
// An API returns a user object with a `role` field. If role is null or missing,
// default to 'viewer'. If role is 0 (though unlikely), keep 0.

const response1 = { role: null };
const response2 = { role: 'admin' };
const response3 = {};  // missing role becomes undefined

function getRole(response) {
  return response?.role ?? 'viewer';
}
console.log('Exercise 2a:', getRole(response1));  // 'viewer'
console.log('Exercise 2b:', getRole(response2));  // 'admin'
console.log('Exercise 2c:', getRole(response3));  // 'viewer'

// ── EXERCISE 3: Default Parameter with null Guard ─────────────────────────
// Write a function that prepends 'Dr. ' to a name, but falls back to 'Dr. Smith'
// if name is undefined OR null.

function greetDoctor(name) {
  // This doesn't handle null:
  // const safeName = name ?? 'Dr. Smith';
  // But default parameter only catches undefined, so we need explicit check:
  const safeName = name ?? 'Dr. Smith';
  return `Hello, Dr. ${safeName}`;
}

console.log(greetDoctor('Jones'));  // 'Hello, Dr. Jones'
console.log(greetDoctor());        // 'Hello, Dr. Smith'
console.log(greetDoctor(null));    // 'Hello, Dr. Smith' (fixed!)

// ── EXERCISE 4: Safely Calling a Method ───────────────────────────────────
// A config object may have an `onSuccess` callback. Call it only if it's a function.

const config1 = { onSuccess: () => 'Success!' };
const config2 = {};  // no onSuccess

function execute(config) {
  if (typeof config?.onSuccess === 'function') {
    return config.onSuccess();
  }
  return 'No callback';
}
console.log('Exercise 4a:', execute(config1));  // 'Success!'
console.log('Exercise 4b:', execute(config2));  // 'No callback'

// ── EXERCISE 5: Distinguishing null from undefined in Equality Checks ─────
// Write a function that returns 'null', 'undefined', or 'value' based on input.

function classifyValue(value) {
  if (value === null) {
    return 'null';
  }
  if (value === undefined) {
    return 'undefined';
  }
  return `value: ${value}`;
}

console.log('Exercise 5a:', classifyValue(null));       // 'null'
console.log('Exercise 5b:', classifyValue(undefined));  // 'undefined'
console.log('Exercise 5c:', classifyValue(0));          // 'value: 0'
console.log('Exercise 5d:', classifyValue(''));          // 'value: '

// What typeof actually returns
console.log(typeof null);       // "object" — THIS IS THE BUG
console.log(typeof undefined);  // "undefined"

// Dangerous guard that fails
function processData(data) {
  if (typeof data === "object") {
    // data could be null here!
    console.log(data.property); // TypeError if null
  }
}

// Safe guard
function safeProcessData(data) {
  if (data !== null && typeof data === "object") {
    console.log(data.property); // safe
  }
}

function greet(name = "User") {
  console.log(`Hello, ${name}`);
}

greet();             // Hello, User (undefined triggers default)
greet(null);         // Hello, null (null does NOT trigger default)
greet(0);            // Hello, 0
greet("");          // Hello, (empty string)

// Using ?? to handle both null and undefined
function greetFixed(name) {
  const safeName = name ?? "User";
  console.log(`Hello, ${safeName}`);
}

greetFixed(null);    // Hello, User (?? catches null)

const payload = {
  id: 42,
  name: "Alice",
  email: undefined,  // will be removed
  phone: null,       // will be preserved
  tags: [undefined, "active", undefined]  // becomes [null, "active", null]
};

console.log(JSON.stringify(payload));
// Output: {"id":42,"name":"Alice","phone":null,"tags":[null,"active",null]}

// Safe pattern for API responses
function buildResponse(user) {
  return {
    id: user.id,
    name: user.name,
    email: user.email ?? null,  // explicit: use null for absence
    phone: user.phone ?? null
  };
}