JavaScript Type Coercion — Empty Inputs Cause $0.00 Bug

// ─── The + operator: string wins ───────────────────────────────────────────
const userAge = 25;
const ageLabel = 'You are ' + userAge + ' years old';
console.log(ageLabel);        // 'You are 25 years old' — number coerced to string
console.log(typeof ageLabel); // 'string'

// The classic form input trap — priceFromInput looks numeric, but it's a string
const priceFromInput = '49'; // value from an HTML text input — always a string
const taxRate = 5;
const totalWrong = priceFromInput + taxRate; // '495' — NOT 54!
console.log('Wrong total:', totalWrong); // '495' — string concatenation, not addition

// Subtraction coerces to number — this is why the bug can hide for a while
const totalRight = priceFromInput - taxRate; // '49' coerced to 49, then 49 - 5
console.log('Right total:', totalRight); // 44 — correct

const multiplied = priceFromInput * 2;
console.log('Multiplied:', multiplied); // 98 — '49' coerced to number

// ─── Boolean coercion: the six falsy values ─────────────────────────────────
const falseValues = [0, '', null, undefined, NaN, false];
falseValues.forEach((val) => {
  console.log(`${String(val)} is falsy: ${!val}`); // all true
});

// The trap that catches experienced developers: empty array and object are TRUTHY
const emptyCart = [];
const emptyUserProfile = {};
if (emptyCart) console.log('Cart exists (truthy)');         // this runs
if (emptyUserProfile) console.log('Profile exists (truthy)'); // this runs too

// To actually check whether an array has items, check its length
if (emptyCart.length === 0) console.log('Cart is empty'); // this is the correct check

// And for objects, use Object.keys()
if (Object.keys(emptyUserProfile).length === 0) console.log('Profile has no fields');

// ─── The == coercion algorithm in action ────────────────────────────────────

// String vs Number: string converts to number
console.log('5' == 5);   // true  — '5' becomes 5
console.log('5' === 5);  // false — different types, comparison stops here

// Boolean vs anything: boolean converts to number FIRST
console.log(true == 1);   // true  — true → 1
console.log(false == 0);  // true  — false → 0
console.log(true == '1'); // true  — true → 1, then '1' → 1, then 1 == 1

// null and undefined: equal to each other, nothing else
console.log(null == undefined); // true  — the spec says so explicitly
console.log(null === undefined); // false — different types
console.log(null == 0);         // false — null only equals undefined with ==
console.log(null == false);     // false — same reason, no coercion for null
console.log(null == '');        // false — still no

// ─── The real-world bug: role ID of 0 fails an admin check ──────────────────
function isUserAdmin(role) {
  // Bug: false coerces to 0, and 0 == 0 is true
  // So a role of 0 incorrectly fails this check
  if (role == false) {
    return false;
  }
  return true;
}

console.log(isUserAdmin(0));       // false — WRONG. 0 is a valid role ID.
console.log(isUserAdmin('admin')); // true  — correct

// Fix: === stops the coercion entirely
function isUserAdminFixed(role) {
  if (role === null || role === undefined) {
    return false;
  }
  return true;
}

console.log(isUserAdminFixed(0));       // true  — correct, 0 is a valid role
console.log(isUserAdminFixed(null));    // false — correct
console.log(isUserAdminFixed('admin')); // true  — correct

// ─── The one acceptable == in production ────────────────────────────────────
function processApiResponse(data) {
  // Intentional: catches both null and undefined from the API response
  // Do not 'fix' this to === null — it would break the undefined case
  if (data == null) {
    console.log('No data received from API');
    return;
  }
  console.log('Processing:', data);
}

processApiResponse(null);      // 'No data received from API'
processApiResponse(undefined); // 'No data received from API'
processApiResponse({ id: 1 }); // 'Processing: { id: 1 }'

// ─── To Number ──────────────────────────────────────────────────────────────
const quantityInput = '42';  // from a form field
const priceInput = '19.99'; // from a form field
const invalidInput = 'abc'; // user typed something that isn't a number

console.log(Number(quantityInput)); // 42
console.log(Number(priceInput));    // 19.99
console.log(Number(invalidInput));  // NaN — signals failure clearly
console.log(Number(''));            // 0  — empty string becomes 0, not NaN — watch this
console.log(Number(true));          // 1
console.log(Number(false));         // 0
console.log(Number(null));          // 0
console.log(Number(undefined));     // NaN

// parseInt vs Number: use parseInt only when trailing characters are acceptable
console.log(parseInt('42px', 10)); // 42  — useful when parsing CSS pixel values
console.log(Number('42px'));       // NaN — strict, won't partially parse

// ─── Safe conversion with validation — do this at every input boundary ───────
function calculateOrderTotal(priceString, quantityString) {
  const price = Number(priceString);
  const quantity = Number(quantityString);

  // NaN is a number type — typeof NaN === 'number' — so you have to check explicitly
  if (Number.isNaN(price) || Number.isNaN(quantity)) {
    throw new Error(`Invalid input: price=${priceString}, qty=${quantityString}`);
  }

  return price * quantity;
}

console.log(calculateOrderTotal('19.99', '3')); // 59.97
// calculateOrderTotal('abc', '3'); // throws: Invalid input

// ─── To String ──────────────────────────────────────────────────────────────
const orderCount = 1024;
const isVerified = true;
const emptyValue = null;

console.log(String(orderCount));  // '1024'
console.log(String(isVerified));  // 'true'
console.log(String(emptyValue));  // 'null'      — safe: null.toString() would throw
console.log(String(undefined));   // 'undefined' — also safe

// Template literals trigger the same coercion and are often cleaner to read
const statusMessage = `Order #${orderCount} verified: ${isVerified}`;
console.log(statusMessage); // 'Order #1024 verified: true'

// ─── To Boolean ─────────────────────────────────────────────────────────────
console.log(Boolean(0));        // false
console.log(Boolean(''));       // false
console.log(Boolean('hello'));  // true
console.log(Boolean([]));       // true — empty array is truthy
console.log(Boolean({}));       // true — empty object is truthy

// Double-bang: same result as Boolean(), widely used in React for conditional rendering
const userToken = '';
console.log(!!userToken); // false — no token, don't render protected content

const adminToken = 'eyJhbGci...';
console.log(!!adminToken); // true — token present, render admin panel

// ─── isNaN vs Number.isNaN — this difference matters in production ───────────
console.log(isNaN('hello'));        // true  — 'hello' coerced to NaN, then checked
console.log(isNaN(''));             // false — '' coerced to 0, which isn't NaN — misleading
console.log(Number.isNaN('hello')); // false — no coercion: 'hello' is a string, not NaN
console.log(Number.isNaN(NaN));     // true  — only the actual NaN value returns true

// The practical implication: empty string slips through isNaN validation
const rawInput = '';
if (isNaN(rawInput)) {
  console.log('Invalid — would reject'); // does NOT run — empty string passes!
}
if (Number.isNaN(Number(rawInput))) {
  console.log('Invalid — would reject'); // also does NOT run — Number('') is 0
}
// So for empty string, you need an explicit check:
if (rawInput.trim() === '' || Number.isNaN(Number(rawInput))) {
  console.log('Invalid input'); // this is the correct guard
}

// ─── Default values: || vs ?? ────────────────────────────────────────────────

// || returns the right side when the left is falsy
// Bug: 0 is a valid rating but 0 is falsy — it gets replaced
function displayProductRating(rating) {
  const displayRating = rating || 'No rating yet';
  console.log('Rating:', displayRating);
}

displayProductRating(4.5);  // 'Rating: 4.5'            — correct
displayProductRating(0);    // 'Rating: No rating yet'  — WRONG, 0 is valid
displayProductRating(null); // 'Rating: No rating yet'  — correct

// Fix: ?? only replaces null and undefined, preserves valid falsy values
function displayProductRatingFixed(rating) {
  const displayRating = rating ?? 'No rating yet';
  console.log('Rating:', displayRating);
}

displayProductRatingFixed(4.5);  // 'Rating: 4.5'           — correct
displayProductRatingFixed(0);    // 'Rating: 0'             — correct
displayProductRatingFixed(null); // 'Rating: No rating yet' — correct

// ─── The array sort coercion trap ────────────────────────────────────────────
const inventoryQuantities = [10, 9, 2, 1, 100, 20];

// Default sort: coerces to strings, sorts lexicographically
const wronglySorted = [...inventoryQuantities].sort();
console.log('Wrong sort:', wronglySorted); // [1, 10, 100, 2, 20, 9]

// Fix: provide a numeric comparator
const correctlySorted = [...inventoryQuantities].sort((a, b) => a - b);
console.log('Correct sort:', correctlySorted); // [1, 2, 9, 10, 20, 100]

// ─── Short-circuit evaluation in React (boolean coercion) ────────────────────
const cartItems = [];         // empty array — truthy
const notificationCount = 0; // zero — falsy
const userName = 'Alex';      // non-empty string — truthy

// cartItems is truthy, so cartItems.length > 0 is the correct guard
const showCartBadge = cartItems.length > 0 && '<CartBadge />';
const showNotificationDot = notificationCount > 0 && '<NotificationDot />';
const showWelcomeMessage = userName && `<WelcomeMessage name="${userName}" />`;

console.log(showCartBadge);        // false — correct, no badge
console.log(showNotificationDot);  // false — correct, no dot
console.log(showWelcomeMessage);   // '<WelcomeMessage name="Alex" />' — correct

// ─── The React 0-rendering trap ──────────────────────────────────────────────
// {0 && <Component />} doesn't render nothing — it renders the number 0 on screen
// because the short-circuit returns 0, which React renders as a text node
const itemCount = 0;
console.log(itemCount && 'Show list');      // 0   — React renders '0' on screen
console.log(itemCount > 0 && 'Show list'); // false — React renders nothing

// This affects any counter or numeric flag that can be 0:
const pendingOrders = 0;
// Bad:  {pendingOrders && <OrderList />}  — renders '0' on screen
// Good: {pendingOrders > 0 && <OrderList />}  — renders nothing