Day 16: Scope, Hoisting & Closures

const shop = 'Sharma Sweets';                 // global scope

function makeInvoice(orderNo) {              // function scope
  const prefix = 'INV';
  if (orderNo > 1000) {
    const series = 'B';                      // block scope
    return `${shop} ${prefix}-${series}${orderNo}`;   // looks outward: block → function → global
  }
  return `${shop} ${prefix}-${orderNo}`;
}
console.log(makeInvoice(42));
console.log(makeInvoice(1042));
console.log(typeof prefix, typeof series);  // not visible outside

console.log(greet('Riya'));          // ✅ function declarations are hoisted with their body
function greet(n) { return 'Namaste ' + n; }

console.log(oldStyle);               // undefined – var is hoisted but set to undefined
var oldStyle = 'var';

try {
  console.log(modern);               // ❌ let/const exist but are in the "temporal dead zone"
  let modern = 'let';
} catch (err) {
  console.log(err.name + ': ' + err.message);
}

function createCounter(label) {
  let count = 0;                       // private – nobody outside can touch it
  return function () {                 // this inner function "closes over" count and label
    count++;
    return `${label}: token #${count}`;
  };
}

const counterA = createCounter('Counter A');
const counterB = createCounter('Counter B');
console.log(counterA());
console.log(counterA());
console.log(counterB());               // separate memory for each counter
console.log(counterA());
console.log(typeof count);

// 1. Private state with a public API (module pattern)
function createWallet(start) {
  let balance = start;
  return {
    pay(amount) {
      if (amount > balance) return `Insufficient balance (₹${balance})`;
      balance -= amount;
      return `Paid ₹${amount}, left ₹${balance}`;
    },
    get balance() { return balance; },
  };
}
const wallet = createWallet(1000);
console.log(wallet.pay(650));
console.log(wallet.pay(500));
wallet.balance = 999999;                       // no setter → cannot be changed from outside
console.log(wallet.balance);

// 2. Function factories
const makeDiscount = percent => price => Math.round(price * (1 - percent / 100));
const diwali10 = makeDiscount(10), member5 = makeDiscount(5);
console.log(diwali10(900), member5(900));

// 3. once() – e.g. a coupon that can be applied only once
function once(fn) {
  let done = false, result;
  return (...args) => (done ? result : ((done = true), (result = fn(...args))));
}
const applyCoupon = once(code => `Coupon ${code} applied`);
console.log(applyCoupon('SWEET10'), '|', applyCoupon('AGAIN'));

// 4. Memoisation – cache slow results
function memo(fn) {
  const cache = new Map();
  return n => (cache.has(n) ? cache.get(n) + ' (cached)' : (cache.set(n, fn(n)), cache.get(n)));
}
const slowGst = memo(amount => amount * 0.05);
console.log(slowGst(2000), slowGst(2000));

const withVar = [], withLet = [];
for (var i = 1; i <= 3; i++) withVar.push(() => i);   // ONE shared i for all functions
for (let j = 1; j <= 3; j++) withLet.push(() => j);   // a NEW j for every round
console.log(withVar.map(f => f()));    // [4, 4, 4] ❌
console.log(withLet.map(f => f()));    // [1, 2, 3] ✅

<div id="counters"></div>

<script>
function createTokenCounter(name) {
  let next = 1;                                     // private per counter
  const box = document.createElement('div');
  box.style.cssText = 'display:inline-block;margin:6px;padding:12px 16px;border:1px solid #e5e7eb;border-radius:12px;text-align:center';
  const title = document.createElement('b');
  title.textContent = name;
  const shown = document.createElement('div');
  shown.style.fontSize = '2rem';
  shown.textContent = '—';
  const btn = document.createElement('button');
  btn.textContent = 'Next token';
  btn.addEventListener('click', () => { shown.textContent = 'A' + String(next++).padStart(3, '0'); });   // closure!
  box.append(title, shown, btn);
  return box;
}
document.querySelector('#counters').append(
  createTokenCounter('Sweets counter'),
  createTokenCounter('Namkeen counter'),
  createTokenCounter('Billing'));
</script>