JavaScript Implicit vs Explicit Type Conversion

// JavaScript coerces the number to a string
console.log("Order #" + 42);        // "Order #42"
console.log("Price: $" + 19.99);    // "Price: $19.99"
console.log("Active: " + true);     // "Active: true"
console.log("Value: " + null);      // "Value: null"
console.log("Data: " + undefined);  // "Data: undefined"
console.log("Items: " + [1, 2, 3]); // "Items: 1,2,3"

// Subtraction, multiplication, division force number coercion
console.log("10" - 2);    // 8
console.log("6" * "3");   // 18
console.log("20" / 4);    // 5
console.log("5" % 2);     // 1
 
// Comparison operators coerce to numbers
console.log("10" > 5);    // true (string "10" becomes number 10)
console.log("10" > "5");  // false (string comparison, "1" < "5" in Unicode)
 
// Unary plus coerces to number
console.log(+"42");        // 42
console.log(+true);        // 1
console.log(+false);       // 0
console.log(+"");          // 0

// if statement coerces to boolean
const items = [];
if (items.length) {
  console.log("Has items");   // Does not run (0 is falsy)
}
 
// Logical operators use boolean coercion
const username = "" || "Anonymous";  // "Anonymous" ("" is falsy)
const count = 0 || 10;              // 10 (0 is falsy)
 
// Ternary coerces condition to boolean
const status = null ? "active" : "inactive"; // "inactive"

const age = 25;
const isActive = true;
const price = 19.99;
 
// String() constructor
console.log(String(age));      // "25"
console.log(String(isActive)); // "true"
console.log(String(price));    // "19.99"
console.log(String(null));     // "null"
console.log(String(undefined)); // "undefined"
 
// .toString() method (not available on null/undefined)
console.log(age.toString());      // "25"
console.log(isActive.toString()); // "true"
console.log((255).toString(16));  // "ff" (hexadecimal)
console.log((10).toString(2));    // "1010" (binary)
 
// Template literals (the most readable approach)
console.log(`Age: ${age}`);       // "Age: 25"

const input = "42.5";
const flag = true;
 
// Number() constructor (strict)
console.log(Number(input));     // 42.5
console.log(Number(flag));      // 1
console.log(Number(""));       // 0
console.log(Number("12px"));   // NaN (strict, rejects mixed content)
 
// parseInt() (lenient, parses from start)
console.log(parseInt("42px", 10)); // 42
console.log(parseInt("0xFF", 16)); // 255
console.log(parseInt("11", 2));    // 3 (binary)
 
// parseFloat() (lenient, handles decimals)
console.log(parseFloat("3.14em")); // 3.14
console.log(parseFloat("$19.99")); // NaN (starts with non-numeric char)

// Boolean() constructor
console.log(Boolean(0));        // false
console.log(Boolean(""));      // false
console.log(Boolean(null));     // false
console.log(Boolean(1));        // true
console.log(Boolean("hello"));  // true
console.log(Boolean([]));       // true
 
// Double-NOT shorthand (common in production code)
console.log(!!0);        // false
console.log(!!"hello");  // true
console.log(!!null);     // false
console.log(!!{});       // true

// TASK: Convert string to number for arithmetic
const priceStr = "29.99";
 
// Implicit
const total1 = priceStr * 1;              // 29.99 (coercion via multiplication)
const total2 = +priceStr;                 // 29.99 (coercion via unary plus)
const total3 = priceStr - 0;             // 29.99 (coercion via subtraction)
 
// Explicit
const total4 = Number(priceStr);          // 29.99
const total5 = parseFloat(priceStr);      // 29.99

// TASK: Convert number to string for display
const count = 42;
 
// Implicit
const msg1 = count + "";                  // "42" (coercion via empty string concat)
const msg2 = "" + count;                  // "42"
 
// Explicit
const msg3 = String(count);              // "42"
const msg4 = count.toString();           // "42"
const msg5 = `${count}`;                 // "42" (template literal)

// TASK: Check if a value is truthy
const value = "hello";
 
// Implicit
if (value) { /* runs */ }               // Coercion in if statement
 
// Explicit
if (Boolean(value)) { /* runs */ }      // Visible conversion
if (!!value) { /* runs */ }             // Double-NOT (common shorthand)

// Acceptable: checking for empty array
if (items.length) {
  processItems(items);
}
 
// Explicit needed: 0 is a valid score
const score = 0;
if (score !== null && score !== undefined) {
  displayScore(score); // 'if (score)' would skip valid zero scores
}

const quantityInput = document.querySelector("#quantity").value; // Always a string
 
// DANGEROUS: relies on coercion
const subtotal1 = quantityInput * unitPrice; // Works by accident
 
// SAFE: explicit conversion with validation
const quantity = parseInt(quantityInput, 10);
if (Number.isNaN(quantity) || quantity < 1) {
  showError("Please enter a valid quantity");
  return;
}
const subtotal2 = quantity * unitPrice;

const apiValue = "100";    // From API (string)
const localValue = 100;   // From local state (number)
 
// AMBIGUOUS: relies on == coercion
if (apiValue == localValue) { /* true, but fragile */ }
 
// CLEAR: explicit conversion, strict comparison
if (Number(apiValue) === localValue) { /* true, and obvious */ }