JavaScript Type Coercion Explained: Implicit vs Explicit with Real Examples

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

// Watch what happens when number-looking strings meet +
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 happened

// ─── Arithmetic operators: number wins ──────────────────────────────────────
const totalRight = priceFromInput - taxRate; // '49' coerced to 49, then 49 - 5
console.log('Right total:', totalRight);     // 44 — correct arithmetic

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 print 'true'
});

// The trap: empty array and empty 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 if an array is empty, check its length
if (emptyCart.length === 0) console.log('Cart is empty');  // correct check

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

// String vs Number: string is coerced to number
console.log('5' == 5);    // true  — '5' becomes 5
console.log('5' === 5);   // false — different types, no coercion

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

// The null/undefined special case
console.log(null == undefined);  // true  — spec defines this 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

// ─── Real-world bug this causes ─────────────────────────────────────────────
function isUserAdmin(role) {
  // Bug: if role is the number 0 (a valid falsy role ID), this is wrong
  if (role == false) {
    return false; // 0 == false is TRUE, so role=0 incorrectly fails here
  }
  return true;
}

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

// Fix: use === so no coercion happens
function isUserAdminFixed(role) {
  if (role === false || role === undefined || role === null) {
    return false;
  }
  return true;
}

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

// ─── The one acceptable use of == in production ─────────────────────────────
function processApiResponse(data) {
  // This single check catches BOTH null and undefined — intentional and documented
  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 nonsense

console.log(Number(quantityInput));  // 42      — clean conversion
console.log(Number(priceInput));     // 19.99   — handles decimals
console.log(Number(invalidInput));   // NaN     — signals failure clearly
console.log(Number(''));             // 0       — empty string becomes 0!
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 for integers where trailing chars are ok
console.log(parseInt('42px', 10));   // 42  — useful for CSS values
console.log(Number('42px'));         // NaN — strict, no partial parsing

// ─── Safe number conversion with validation ──────────────────────────────────
function calculateOrderTotal(priceString, quantityString) {
  const price = Number(priceString);
  const quantity = Number(quantityString);

  // Never skip this check — NaN is a number type but not a valid number
  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 Error: 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 also trigger string coercion (and they're cleaner)
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 shorthand — same result, widely used in React for conditional rendering
const userToken = '';
console.log(!!userToken);  // false — no token, don't render private content

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

// ─── isNaN vs Number.isNaN — a critical difference ──────────────────────────
console.log(isNaN('hello'));        // true  — 'hello' coerced to NaN, then checked
console.log(isNaN(''));             // false — '' coerced to 0, which is NOT NaN — misleading!
console.log(Number.isNaN('hello')); // false — no coercion: 'hello' is a string, not NaN
console.log(Number.isNaN(NaN));     // true  — only true NaN values return true

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

// || returns the right side if the left is falsy
// Bug: 0 and '' are valid values but they're falsy — they get replaced!
function displayProductRating(rating) {
  const displayRating = rating || 'No rating yet'; // Bug if rating is 0
  console.log('Rating:', displayRating);
}

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

// Fix: use ?? (nullish coalescing) — only replaces null and undefined
function displayProductRatingFixed(rating) {
  const displayRating = rating ?? 'No rating yet'; // only null/undefined trigger fallback
  console.log('Rating:', displayRating);
}

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

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

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

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

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

// Short-circuit evaluation: left side is falsy → right side never evaluates
// This pattern is everywhere in JSX
const showCartBadge = cartItems.length > 0 && '<CartBadge />';
const showNotificationDot = notificationCount > 0 && '<NotificationDot />';
const showWelcomeMessage = userName && `<WelcomeMessage name="${userName}" />`;

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

// ─── Why cartItems.length > 0 matters instead of just cartItems ──────────────
// In JSX, `{0 && <Component />}` renders the number 0 on screen — a known React bug
// `{cartItems.length > 0 && <Component />}` renders nothing — correct
const itemCount = 0;
console.log(itemCount && 'Show list');    // 0 — React would render '0' on screen!
console.log(itemCount > 0 && 'Show list'); // false — React renders nothing. Correct.