// ── PRIMITIVES are immutable and compared by VALUE ──
let a = "hello";
let b = a;
b = "world";
console.log(a); // "hello" — unchanged

// String methods return NEW strings — they never mutate
let s = "hello";
s.toUpperCase(); // returns "HELLO" — s is still "hello"
s[0] = "H";        // silently fails in non-strict mode

// ── OBJECTS are mutable and compared by REFERENCE ──
let obj1 = { x: 1 };
let obj2 = obj1;          // copies the reference (address)
obj2.x = 99;
console.log(obj1.x);      // 99 — same object!

// ── typeof quirks to memorise ──
typeof null       // "object"  ← famous historical bug
typeof []         // "object"  ← arrays are objects
typeof function(){} // "function" ← special case for functions
typeof undefined  // "undefined"
typeof Symbol()   // "symbol"

// What JS does internally when you call a string method:
"hello".toUpperCase();
// → new String("hello").toUpperCase()  → discards wrapper → "HELLO"

// Never use wrapper object constructors — they create OBJECTS, not primitives:
typeof new String("hi") // "object" ← not "string"!
new Boolean(false) == true // true — because objects are always truthy ⚠

// To Number
Number("42")        // 42
Number("")          // 0  ← surprising!
Number(true)       // 1
Number(false)      // 0
Number(null)       // 0  ← surprising!
Number(undefined)  // NaN
Number("abc")      // NaN
Number([])         // 0  ← very surprising!
Number([1])        // 1
Number([1,2])      // NaN
parseInt("42px")  // 42  (stops at first non-digit)
+"42"              // 42  (unary + operator)

// To String
String(42)         // "42"
String(null)       // "null"
String(undefined)  // "undefined"
(42).toString()    // "42"

// To Boolean
Boolean(0)         // false
Boolean("")        // false
Boolean(null)      // false
Boolean({})        // true  ← empty object is truthy!
!!value            // double-negation trick — most common

// + prefers STRING concatenation if either operand is a string
"5" + 3        // "53"   (number coerced to string)
5   + "3"      // "53"
"5" + true    // "5true"
"5" + null    // "5null"
[] + []        // ""     (both convert to "")
[] + {}        // "[object Object]"
{} + []        // 0  ← {} parsed as empty BLOCK, not object!

// - * / prefer NUMBER coercion
"5" - 3        // 2     (string coerced to number)
"5" * "3"      // 15
"abc" - 1     // NaN

// Comparison operators — many gotchas
1 < "2"        // true  (string → number)
"a" > "B"     // true  (char codes: a=97, B=66)
null > 0      // false
null == 0     // false  ← null only == undefined
null >= 0     // true   ← bizarre! (null converts to 0 for >=)

// ⚠ These are ALL truthy — they catch people out
if ({})          console.log('truthy'); // ✅ empty object
if ([])          console.log('truthy'); // ✅ empty array
if ("false")     console.log('truthy'); // ✅ non-empty string
if ("0")         console.log('truthy'); // ✅ "0" is truthy but Number("0") is 0 (falsy)
if (new Boolean(false)) console.log('truthy'); // ✅ OBJECTS are always truthy
if (function(){}) console.log('truthy'); // ✅ functions are objects

// Practical consequence — how to check for empty array:
if (arr)                  // ❌ ALWAYS truthy — even if empty
if (arr.length)           // ✅ 0 is falsy, non-zero is truthy
if (arr.length > 0)       // ✅ most explicit

// Practical consequence — the "0" string bug:
const input = "0";   // user typed "0"
if (input) { /* runs — "0" is truthy ✅ */ }
if (Number(input)) { /* does NOT run — Number("0") is 0, falsy */ }

// ── typeof ── works perfectly for primitives
typeof "hello"     // "string"
typeof 42          // "number"
typeof true        // "boolean"
typeof undefined   // "undefined"
typeof Symbol()    // "symbol"
typeof 42n         // "bigint"
typeof function(){} // "function" ← special case
typeof {}           // "object"
typeof []           // "object" ← can't distinguish array!
typeof null         // "object" ← the famous bug

// Safe null check using typeof:
if (x !== null && typeof x === "object") { /* it's a real object */ }

// ── instanceof ── checks the prototype chain
[] instanceof Array   // true
[] instanceof Object  // true  ← arrays ARE objects
new Date() instanceof Date  // true
"hello" instanceof String  // false! ← primitive, not wrapper object

// ── Object.prototype.toString ── most precise
const typeOf = x => Object.prototype.toString.call(x).slice(8, -1);

typeOf(null)        // "Null"
typeOf(undefined)   // "Undefined"
typeOf([])          // "Array"   ← correctly identifies arrays
typeOf({})          // "Object"
typeOf(new Date())  // "Date"
typeOf(/regex/)     // "RegExp"
typeOf(Promise.resolve()) // "Promise"

// ── Practical helpers for daily use ──
const isArray    = x => Array.isArray(x);         // best for arrays
const isNull     = x => x === null;              // only way
const isObject   = x => typeof x === 'object' && x !== null;

// null — intentional emptiness
let selectedUser = null;          // nothing selected yet
function findUser(id) {
  const user = db.find(id);
  return user ?? null;             // explicit: "found nothing"
}

// undefined — appears automatically
let x;                             // undefined — declared, not assigned
function greet(name) {
  console.log(name);               // undefined if called with no arg
}
const obj = {};
obj.missing;                       // undefined — property doesn't exist
[1,2,3][99];                        // undefined — out of bounds index

// undeclared — accessing causes ReferenceError
console.log(notDeclared);          // ❌ ReferenceError
typeof notDeclared;               // "undefined" — safe, no error

// Safe pattern to check for undeclared globals:
if (typeof myGlobal !== 'undefined') { /* safe */ }

// Null check — the nullish pattern
if (value == null) { /* catches BOTH null AND undefined */ }
if (value === null) { /* only null */ }
if (value === undefined) { /* only undefined */ }

// Ways NaN appears
Number("abc")     // NaN — invalid conversion
0 / 0            // NaN
Math.sqrt(-1)    // NaN — no real square root of negative
parseInt("xyz") // NaN
undefined + 1   // NaN

// NaN's most bizarre property: it doesn't equal itself
NaN === NaN      // false  ← NaN is the only value not equal to itself
NaN !== NaN      // true

// ❌ Wrong ways to detect NaN:
value === NaN    // always false — even for NaN itself!

// ✅ Correct ways to detect NaN:
isNaN(value)              // true for NaN, BUT coerces first! isNaN("abc") → true
Number.isNaN(value)       // ✅ best: no coercion. Number.isNaN("abc") → false
value !== value           // true only for NaN (exploits the self-inequality)

// -0 exists and behaves strangely
const negZero = -0;

// Most operations treat -0 same as 0
-0 === 0              // true  ← === can't distinguish them!
-0 > 0               // false
String(-0)           // "0"   ← loses the sign
JSON.stringify(-0)   // "0"   ← loses the sign

// ✅ Ways to detect -0:
Object.is(-0, 0)       // false ← Object.is has no coercion, distinguishes -0
Object.is(-0, -0)      // true
1 / -0 === -Infinity  // true ← divide by -0 gives -Infinity

// Object.is — the "same value equality" algorithm
Object.is(NaN, NaN)   // true  ← NaN equals NaN here (unlike ===)
Object.is(-0, 0)       // false ← -0 ≠ +0 here (unlike ===)
// Otherwise identical to ===

// {} === {} is like asking "is house at 12 Oak St === house at 14 Oak St"
{} === {}                        // false — different addresses
[] === []                        // false — same reason

// Equality only holds when pointing to THE SAME object
const a = { x: 1 };
const b = a;                    // b holds the same address as a
a === b                         // true — same reference

// Value comparison of objects — you must write your own or use a library
const deepEqual = (a, b) =>
  JSON.stringify(a) === JSON.stringify(b); // quick but has limits (undefined, functions)

// In tests: Jest's toEqual() does deep structural comparison
expect({ a: 1 }).toEqual({ a: 1 }); // ✅ passes
expect({ a: 1 }).toBe({ a: 1 });    // ❌ fails (reference check)

// React's useState — same reference = no re-render
const [items, setItems] = useState([]);
setItems(items);         // ❌ same reference — no re-render
setItems([...items]);   // ✅ new reference — triggers re-render

const original = { a: 1, nested: { x: 10 } };

// Spread operator — shallow copy
const copy1 = { ...original };

// Object.assign — shallow copy
const copy2 = Object.assign({}, original);

// Both are SHALLOW — nested object is still shared
copy1.a = 99;            // ✅ independent — original.a is still 1
copy1.nested.x = 99;   // ⚠ original.nested.x also becomes 99!

// Array shallow copies
const arrCopy = [...original]; // spread
const arrCopy2 = arr.slice(); // slice with no args
const arrCopy3 = Array.from(arr);

const obj = {
  name: 'Alice',
  scores: [90, 85],
  date: new Date(),
  fn: () => 'hello'
};

// structuredClone — the modern standard (Node 17+, modern browsers)
const deep1 = structuredClone(obj);
deep1.scores.push(100); // original.scores unaffected ✅
// Note: obj.fn is NOT cloned — structuredClone ignores functions

// JSON.parse/stringify — quick but lossy
const deep2 = JSON.parse(JSON.stringify(obj));
// obj.date → string, obj.fn → gone, obj.undefined → gone

// ── Basic: every Symbol is unique ──
const s1 = Symbol('id');
const s2 = Symbol('id');
s1 === s2   // false — description is just a label, not the value

// ── Use case 1: unique object keys (avoid naming collisions) ──
const ID = Symbol('id');
const user = { [ID]: 123, name: 'Alice' };
user[ID]     // 123 — only accessible via the Symbol reference
user.id      // undefined — string "id" key doesn't exist

// Symbol keys are NOT enumerable in for...in or Object.keys()
Object.keys(user)   // ['name'] — Symbol key hidden
JSON.stringify(user) // '{"name":"Alice"}' — Symbol stripped
Object.getOwnPropertySymbols(user)  // [Symbol(id)]

// ── Use case 2: private-like class fields (pre-#fields era) ──
const _secret = Symbol('secret');
class Vault {
  constructor(val) { this[_secret] = val; }
  reveal() { return this[_secret]; }
}

// ── Use case 3: well-known Symbols — hook into JS internals ──
class Range {
  constructor(start, end) { this.start = start; this.end = end; }
  [Symbol.iterator]() {     // makes Range iterable!
    let cur = this.start;
    const end = this.end;
    return { next: () => cur <= end ? { value: cur++, done: false } : { done: true } };
  }
}
[...new Range(1,5)]  // [1, 2, 3, 4, 5]

// ── Symbol.for — global symbol registry (shared across files) ──
const g1 = Symbol.for('shared'); // creates or retrieves from registry
const g2 = Symbol.for('shared');
g1 === g2  // true — same registry entry

// ── Case 1: null == undefined ──
null == undefined   // true — spec rule: these two are always equal via ==
null == 0           // false — null only == undefined, nothing else
null == ""          // false
null == false       // false ← catches many people out

// ── Case 2: "0" == false ──
"0" == false
// Step 4: boolean involved → convert false to number → 0
// Now: "0" == 0
// Step 3: number vs string → convert "0" to number → 0
// Now: 0 == 0 → true ✅
// But: if ("0") → TRUE (non-empty string is truthy)
// Paradox: "0" is truthy, yet "0" == false is true!

// ── Case 3: [] == false ──
[] == false
// Step 4: boolean → 0 → [] == 0
// Step 5: object vs primitive → [].valueOf() → [] (not primitive)
//          → [].toString() → "" → "" == 0
// Step 3: string vs number → Number("") → 0 → 0 == 0 → true

// ── Case 4: [] == ![] ──  (famous interview trick)
[] == ![]
// ![] = !true = false (objects are truthy → ![] is false)
// Now: [] == false → true (same as Case 3)
// So: [] == ![] is TRUE! Both sides coerce to 0.

// ── Summary table for common == cases ──
"" == 0             // true  (""→0)
"1" == true         // true  (true→1, "1"→1)
"0" == false        // true  (false→0, "0"→0)
null == undefined   // true  (spec rule)
NaN == NaN           // false (NaN is never equal to anything)

// What you write:
console.log(x); // undefined (NOT ReferenceError)
var x = 5;
console.log(x); // 5

// What the engine sees (conceptually):
var x;             // ← declaration hoisted to top of scope, initialised undefined
console.log(x); // undefined
x = 5;             // ← assignment stays in place
console.log(x); // 5

// var is function-scoped — block {} does NOT create a new scope for var
function demo() {
  if (true) {
    var leaky = 'I escape the block';
  }
  console.log(leaky); // 'I escape the block' — var leaked out of if block
}

// Function declaration: fully hoisted — can call BEFORE the definition
greet('Alice'); // ✅ Works! Output: "Hello, Alice"

function greet(name) {
  console.log('Hello, ' + name);
}

// Function EXPRESSION — NOT hoisted (only the var declaration is)
sayHi(); // ❌ TypeError: sayHi is not a function
var sayHi = function() { console.log('hi'); };
// var sayHi is hoisted as undefined, then called → TypeError

// Arrow function assigned to const — also NOT hoisted (TDZ)
sayBye(); // ❌ ReferenceError: Cannot access 'sayBye' before initialization
const sayBye = () => console.log('bye');

// let and const ARE hoisted (block-scoped), but accessing them before
// declaration throws ReferenceError — the Temporal Dead Zone
console.log(y); // ❌ ReferenceError: Cannot access 'y' before initialization
let y = 10;

// Proof let IS hoisted (not just "not hoisted"):
let x = 'global';
{
  console.log(x); // ❌ ReferenceError — NOT 'global'!
  let x = 'block'; // the block-scoped x IS hoisted, creating TDZ from line 1 of block
}
// If let wasn't hoisted at all, console.log(x) would print 'global'
// The ReferenceError proves it was hoisted but in TDZ

{
  // ← TDZ for 'name' STARTS here (block start)
  // ← TDZ for 'name' STARTS here (block start)

  console.log(typeof name); // ❌ ReferenceError — in TDZ
  console.log(name);         // ❌ ReferenceError — in TDZ

  let name = 'Alice';         // ← TDZ ENDS here — name is now initialised

  console.log(name);         // ✅ 'Alice'
}

// typeof does NOT protect you from TDZ (unlike undeclared variables)
console.log(typeof notDeclared); // "undefined" — safe for undeclared
console.log(typeof tdzVar);      // ❌ ReferenceError — TDZ overrides typeof safety
let tdzVar = 1;

// With var — silent, confusing bug:
function badSetup() {
  init(config);       // config is undefined — silent wrong behaviour
  var config = { debug: true };
}

// With let — explicit error, immediately obvious:
function goodSetup() {
  init(config);       // ❌ ReferenceError — caught immediately
  let config = { debug: true };
}

// const means the BINDING is constant — not the VALUE
const user = { name: 'Alice' };
user.name = 'Bob';   // ✅ mutating the object is fine
user = {};           // ❌ TypeError: reassigning the binding is not allowed

const arr = [1, 2, 3];
arr.push(4);         // ✅ mutating array is fine
arr = [];             // ❌ TypeError

// To make an object truly immutable:
const frozen = Object.freeze({ x: 1 });
frozen.x = 99; // silently ignored (throws in strict mode)

const city = 'London'; // global scope

function outer() {
  const country = 'UK';   // outer function scope

  function inner() {
    const street = 'Baker St'; // inner function scope
    console.log(street);  // ✅ own scope
    console.log(country); // ✅ parent scope (closure)
    console.log(city);    // ✅ grandparent scope
  }

  inner();
  // console.log(street); ← ❌ ReferenceError — outer can't see inner
}

// Lexical: inner's scope is decided at write-time, not call-time
function getCountry() {
  const country = 'France'; // this scope is irrelevant to inner()
  inner();                   // inner still sees UK, not France
}

let value = 'global';

function demo() {
  let value = 'function'; // shadows the outer 'value'
  console.log(value);    // 'function' — inner variable wins

  {
    let value = 'block'; // shadows further
    console.log(value);  // 'block'
  }

  console.log(value);    // 'function' — block scope gone
}

console.log(value);       // 'global' — outer untouched

// ⚠ Shadowing can cause bugs — use unique, descriptive names in nested scopes

const a = 'global-a';

function level1() {
  const b = 'level1-b';

  function level2() {
    const c = 'level2-c';

    function level3() {
      // Scope chain lookup for each variable:
      console.log(c); // found in level2 scope ✅
      console.log(b); // not in level3, not in level2 → found in level1 ✅
      console.log(a); // not in level3/2/1 → found in global ✅
      console.log(d); // not found anywhere → ReferenceError ❌
    }
    level3();
  }
  level2();
}

// Scope chain is fixed at write time — it's the closure environment
// The engine walks UP the chain, never DOWN

function makeCounter() {
  let count = 0; // this variable lives in makeCounter's scope

  return function increment() {
    count++;          // closes over 'count' — still accessible after makeCounter returns
    return count;
  };
}

const counter = makeCounter(); // makeCounter's stack frame is gone...
counter(); // 1 — but count is still alive in the closure!
counter(); // 2
counter(); // 3

// Each call to makeCounter creates a NEW closure with its OWN count
const counter2 = makeCounter();
counter2(); // 1 — independent from counter

function makeAdder(x) {
  return (y) => x + y; // closes over x (the parameter)
}

const add5  = makeAdder(5);
const add10 = makeAdder(10);

add5(3);   // 8   — x is 5 in this closure
add10(3);  // 13  — x is 10 in this closure

// By reference — if the outer variable changes, the closure sees it
function makeLogger() {
  let msg = 'initial';
  const log    = () => console.log(msg);
  const update = (s) => { msg = s; };
  return { log, update };
}

const logger = makeLogger();
logger.log();           // 'initial'
logger.update('changed');
logger.log();           // 'changed' — both functions share the same msg reference

// ❌ Expected: clicks print 0, 1, 2, 3, 4
// Actual: every click prints 5
for (var i = 0; i < 5; i++) {
  document.getElementById('btn-' + i).addEventListener('click', function() {
    console.log(i); // all 5 callbacks close over the SAME 'i'
  });
}
// By the time any button is clicked, the loop is done and i === 5
// All callbacks share ONE var i — they all see the final value

// ✅ let creates a new 'i' for EACH loop iteration
for (let i = 0; i < 5; i++) {
  document.getElementById('btn-' + i).addEventListener('click', function() {
    console.log(i); // each callback captures its own i: 0, 1, 2, 3, 4
  });
}
// This is the modern, clean fix — just switch var to let

// ✅ IIFE captures i as a parameter (fresh copy each time)
for (var i = 0; i < 5; i++) {
  (function(j) { // j is a new parameter — a snapshot of i at this iteration
    document.getElementById('btn-' + j).addEventListener('click', function() {
      console.log(j); // j is 0, 1, 2, 3, 4 — captured by value in IIFE param
    });
  })(i); // ← pass current i as argument immediately
}

// ✅ bind pre-fills i as first argument — captures current value
for (var i = 0; i < 5; i++) {
  document.getElementById('btn-' + i).addEventListener('click',
    (function(j) { console.log(j); }).bind(null, i)
  );
}

// ── Summary ──
// Root cause: var has function scope — ALL iterations share ONE variable
// let fix:    creates a new block-scoped binding per iteration  ← use this
// IIFE fix:   creates a new function scope + captures via parameter
// bind fix:   pre-fills the current i value as an argument

function memoize(fn) {
  const cache = new Map(); // closed over — persists across calls
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache.has(key)) return cache.get(key);
    const result = fn(...args);
    cache.set(key, result);
    return result;
  };
}

const expensiveFib = memoize(function fib(n) {
  return n <= 1 ? n : fib(n-1) + fib(n-2);
});
expensiveFib(40); // computed once
expensiveFib(40); // instant — returned from cache

function createBankAccount(initialBalance) {
  let balance = initialBalance; // private — no direct outside access

  return {
    deposit(amount) {
      if (amount > 0) balance += amount;
    },
    withdraw(amount) {
      if (amount > balance) throw new Error('Insufficient funds');
      balance -= amount;
    },
    getBalance() { return balance; }
  };
}

const account = createBankAccount(100);
account.deposit(50);
console.log(account.getBalance()); // 150
console.log(account.balance);     // undefined — balance is truly private

// Partial application — pre-fill some arguments
function multiply(x, y) { return x * y; }
const double = (y) => multiply(2, y);    // closes over 2
const triple = (y) => multiply(3, y);    // closes over 3
double(5); // 10

// React — closure captures the current item in a list render
function ItemList({ items, onDelete }) {
  return items.map((item) => (
    <button onClick={() => onDelete(item.id)}>  // ← closure over item
      Delete {item.name}
    </button>
  ));
}

// React useState — the updater function closes over state
const [count, setCount] = useState(0);
// ⚠ Stale closure trap — count may be stale in async callbacks:
setTimeout(() => setCount(count + 1), 1000); // captured stale count
setTimeout(() => setCount(c => c + 1), 1000); // ✅ updater form — always fresh

// Classic IIFE syntax
(function() {
  var secret = 'hidden'; // scoped to the IIFE — never pollutes global
  console.log('runs immediately');
})();

// Arrow function IIFE (ES6+)
(() => {
  console.log('also runs immediately');
})();

// IIFE with parameters
(function(name) {
  console.log('Hello, ' + name);
})('Alice');

// Returning a value from IIFE
const result = (function() {
  return 42;
})();

// Pre-ES6 — all scripts shared one global namespace
// library-a.js and library-b.js both declare 'utils' — collision!
var utils = { ... }; // overwritten if another file does the same

// Fix: wrap everything in an IIFE — creates private scope
(function() {
  var utils = { ... }; // scoped here — no collision
  window.MyLib = { ... }; // only expose what's needed
})();

// 1. Async IIFE — top-level await without a module
(async () => {
  const data = await fetchData();
  console.log(data);
})();

// 2. Initialisation logic that runs once with no leftover variables
const config = (() => {
  const env = process.env.NODE_ENV;
  return {
    debug: env !== 'production',
    apiUrl: env === 'production' ? 'https://api.prod.com' : 'https://api.dev.com'
  };
})();
// env is not accessible outside — only config is

const UserModule = (function() {
  // Private — not accessible from outside
  const _users = [];
  let _nextId = 1;

  function _validate(name) {
    return typeof name === 'string' && name.length > 0;
  }

  // Public API — the returned object is all that's exposed
  return {
    addUser(name) {
      if (!_validate(name)) throw new Error('Invalid name');
      _users.push({ id: _nextId++, name });
    },
    getUsers() { return [..._users]; }, // return copy — protect internal array
    count() { return _users.length; }
  };
})();

UserModule.addUser('Alice');
console.log(UserModule.count()); // 1
console.log(UserModule._users);  // undefined — truly private

// ── 1. Function Declaration ──
greet('Alice');                     // ✅ hoisted — works before definition
function greet(name) {
  return `Hello, ${name}`;
}

// ── 2. Function Expression ──
const add = function(a, b) {   // anonymous
  return a + b;
};

const factorial = function fact(n) {  // named expression — name is usable inside
  return n <= 1 ? 1 : n * fact(n - 1); // 'fact' accessible here
};

// ── 3. Arrow Function ──
const multiply = (a, b) => a * b;    // implicit return
const square   = n => n * n;           // single param — no parens needed
const getObj   = () => ({ x: 1 });     // wrap object literal in () to avoid ambiguity
const process  = (x) => {             // block body — explicit return needed
  const result = x * 2;
  return result;
};

function Timer() {
  this.seconds = 0;

  // ❌ Pre-ES6 problem: this inside setTimeout is NOT the Timer instance
  setInterval(function() {
    this.seconds++;        // 'this' is window/undefined — bug!
  }, 1000);

  // Old fix: capture this in a variable
  const self = this;
  setInterval(function() {
    self.seconds++;         // ✅ 'self' is captured from the outer scope
  }, 1000);

  // ✅ Modern fix: arrow function — 'this' is captured from Timer constructor
  setInterval(() => {
    this.seconds++;         // 'this' = Timer instance — correct!
  }, 1000);
}

const user = {
  name: 'Alice',

  // ❌ Arrow function — 'this' is NOT the user object
  greetArrow: () => {
    console.log(`Hello, ${this.name}`); // this = window/undefined
  },

  // ✅ Regular function — 'this' is the user object when called as method
  greetRegular() {
    console.log(`Hello, ${this.name}`); // 'Alice'
  }
};

user.greetArrow();   // "Hello, undefined"
user.greetRegular(); // "Hello, Alice"

// Arrow functions DO work great as callbacks inside methods:
const counter = {
  count: 0,
  nums: [1, 2, 3],
  sum() {
    // 'this' here is counter (method call)
    this.nums.forEach(n => {
      this.count += n; // ✅ arrow inherits 'this' from sum() — correct!
    });
  }
};

function showThis() {
  console.log(this);
}

showThis();                 // window (browser) / global (Node) — non-strict
                             // undefined — in strict mode or ES modules

// Implicit binding LOST — a very common bug
const obj = { name: 'Obj', greet() { console.log(this.name); } };
const detached = obj.greet;  // copied the function reference — no obj context
detached();                   // undefined — default binding, not obj
setTimeout(obj.greet, 100); // also loses context — passed as callback

const person = {
  name: 'Alice',
  greet() { console.log(this.name); }
};
person.greet(); // 'Alice' — this = person (object before the dot)

// Only the LAST object in the chain matters
const a = { b: { name: 'nested', fn() { console.log(this.name); } } };
a.b.fn(); // 'nested' — this = b, not a

function introduce(greeting, punctuation) {
  console.log(`${greeting}, I'm ${this.name}${punctuation}`);
}
const alice = { name: 'Alice' };

introduce.call(alice, 'Hi', '!');       // call — args spread out: "Hi, I'm Alice!"
introduce.apply(alice, ['Hello', '.']); // apply — args as array: "Hello, I'm Alice."
const boundFn = introduce.bind(alice, 'Hey'); // bind — returns NEW function, this fixed
boundFn('?');                             // "Hey, I'm Alice?"

function Dog(name) {
  this.name = name;  // 'this' = the newly created object
}

const rex = new Dog('Rex');
console.log(rex.name); // 'Rex'

// new always beats explicit binding (highest priority):
function Cat(name) { this.name = name; }
const BoundCat = Cat.bind({ name: 'overridden' });
const fluffy = new BoundCat('Fluffy');
console.log(fluffy.name); // 'Fluffy' — new wins over bind

// 1. Global scope
console.log(this);            // window (browser) / {} or module.exports (Node CJS)

// 2. Regular function (non-strict)
function fn() { return this; }
fn();                          // window / global

// 3. Regular function (strict mode)
'use strict';
function strictFn() { return this; }
strictFn();                    // undefined ← strict prevents global pollution

// 4. Class — always strict mode internally
class Car {
  constructor() { this.speed = 0; }    // this = new Car instance
  accelerate() { this.speed += 10; }  // this = the calling instance
}
const car = new Car();
const accel = car.accelerate;
accel();  // ❌ TypeError: cannot set speed of undefined (class = strict)
car.accelerate(); // ✅ this = car instance

// 5. setTimeout — callback is detached (loses context)
class Clock {
  constructor() {
    setTimeout(function() {
      console.log(this); // ❌ window/undefined — function detached
    }, 100);

    setTimeout(() => {
      console.log(this); // ✅ Clock instance — arrow inherits lexical this
    }, 100);
  }
}

// 6. DOM event handler
button.addEventListener('click', function() {
  console.log(this); // ✅ the button element
});
button.addEventListener('click', () => {
  console.log(this); // ❌ window — arrow doesn't get element as this
});

// Borrow Array methods for array-like objects
function logArgs() {
  // 'arguments' is array-like but NOT a real Array
  const arr = Array.prototype.slice.call(arguments); // borrow slice from Array
  console.log(arr.join(', '));
}
logArgs(1, 2, 3); // "1, 2, 3"

// Modern equivalent:
function logArgs2(...args) { console.log(args.join(', ')); }

// Borrow a method from one object for another
const dog  = { name: 'Rex',  speak() { return `${this.name} says woof`; } };
const cat  = { name: 'Mimi' };
console.log(dog.speak.call(cat)); // "Mimi says woof" — cat borrows dog's method

const nums = [5, 3, 8, 1, 9, 2];

// apply spreads an array as individual arguments
Math.max.apply(null, nums);  // 9  — old way
Math.max(...nums);            // 9  — modern spread (preferred)

// Fix lost context — pass method as callback
class Button {
  constructor(label) { this.label = label; }
  handleClick() { console.log('Clicked:', this.label); }
}
const btn = new Button('Submit');

document.addEventListener('click', btn.handleClick);              // ❌ this lost
document.addEventListener('click', btn.handleClick.bind(btn));    // ✅ this = btn
document.addEventListener('click', () => btn.handleClick());       // ✅ arrow wrapper

// Partial application with bind — pre-fill first arguments
function multiply(x, y) { return x * y; }
const double = multiply.bind(null, 2); // null = don't care about this, x=2 fixed
const triple = multiply.bind(null, 3);
double(5);  // 10
triple(5);  // 15

// ── map: transform every element, return new array of same length ──
Array.prototype.myMap = function(callbackFn) {
  const result = [];
  for (let i = 0; i < this.length; i++) {
    if (i in this) {   // skip holes in sparse arrays
      result.push(callbackFn(this[i], i, this));
    }
  }
  return result;
};

// ── filter: keep elements where callback returns truthy ──
Array.prototype.myFilter = function(callbackFn) {
  const result = [];
  for (let i = 0; i < this.length; i++) {
    if (i in this && callbackFn(this[i], i, this)) {
      result.push(this[i]);
    }
  }
  return result;
};

// ── reduce: fold array into a single accumulated value ──
Array.prototype.myReduce = function(callbackFn, initialValue) {
  let acc, startIndex;
  if (arguments.length >= 2) {
    acc = initialValue;
    startIndex = 0;
  } else {
    if (this.length === 0) throw new TypeError('Reduce of empty array with no initial value');
    acc = this[0];
    startIndex = 1;
  }
  for (let i = startIndex; i < this.length; i++) {
    if (i in this) {
      acc = callbackFn(acc, this[i], i, this);
    }
  }
  return acc;
};

// Usage and verification
[1,2,3].myMap(x => x * 2);          // [2, 4, 6]
[1,2,3,4].myFilter(x => x % 2 === 0); // [2, 4]
[1,2,3,4].myReduce((acc, x) => acc + x, 0); // 10

const nums = [1, 2, 3, 4, 5];

// map via reduce
nums.reduce((acc, x) => [...acc, x * 2], []); // [2,4,6,8,10]

// filter via reduce
nums.reduce((acc, x) => x % 2 ? [...acc, x] : acc, []); // [1,3,5]

// group by — a common interview question
const people = [
  { name: 'Alice', dept: 'eng' },
  { name: 'Bob',   dept: 'eng' },
  { name: 'Carol', dept: 'mkt' },
];
people.reduce((groups, person) => {
  (groups[person.dept] ??= []).push(person.name);
  return groups;
}, {}); // { eng: ['Alice','Bob'], mkt: ['Carol'] }

// ── Manual currying ──
const add = (a) => (b) => (c) => a + b + c;
add(1)(2)(3); // 6
const add1 = add(1);       // partial: a=1 fixed
const add1and2 = add1(2);  // partial: a=1, b=2 fixed
add1and2(10);               // 13

// ── Generic curry() — works on any function ──
function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      // Enough arguments — call the original function
      return fn.apply(this, args);
    }
    // Not enough — return a function collecting more arguments
    return function(...moreArgs) {
      return curried.apply(this, args.concat(moreArgs));
    };
  };
}

const sum = (a, b, c) => a + b + c;
const curriedSum = curry(sum);

curriedSum(1, 2, 3);   // 6 — all at once
curriedSum(1)(2)(3);  // 6 — one at a time
curriedSum(1, 2)(3); // 6 — mixed
const addTo5 = curriedSum(2, 3); // partial — returns fn waiting for c
addTo5(10);             // 15

// Real world: curried validators, formatters, event loggers
const log = curry((level, msg) => console.log(`[${level}] ${msg}`));
const info  = log('INFO');
const error = log('ERROR');
info('Server started');   // [INFO] Server started
error('DB connection lost'); // [ERROR] DB connection lost

// ✅ PURE — same input, same output, no external changes
const add = (a, b) => a + b;
const double = (arr) => arr.map(x => x * 2); // returns new array, doesn't mutate
const getFullName = (user) => `${user.first} ${user.last}`;

// ❌ IMPURE — mutates argument
function addItem(arr, item) {
  arr.push(item);  // mutates the original array
  return arr;
}
// ✅ Pure version:
const addItem = (arr, item) => [...arr, item]; // new array

// ❌ IMPURE — depends on external state
let taxRate = 0.2;
const getPrice = (base) => base * (1 + taxRate); // depends on outer taxRate
// ✅ Pure version:
const getPrice = (base, taxRate) => base * (1 + taxRate); // inject the dependency

// ❌ IMPURE — non-deterministic
const getRandomId = () => Math.random(); // different output every call
const getTimestamp = () => Date.now();     // depends on external time

// ❌ Impure React component — mutates a variable outside the component
let guestCount = 0;
function Guest() {
  guestCount++;  // side effect — React may call this multiple times in StrictMode
  return <p>Guest #{guestCount}</p>;
}

// ✅ Pure React component — same props = same output, no external mutations
function Guest({ number }) {
  return <p>Guest #{number}</p>;
}

// Benefits of pure functions:
// 1. Memoization: React.memo, useMemo — safely skip re-renders
// 2. Concurrent mode: React can pause/resume/retry renders safely
// 3. Testing: no setup/teardown — just call the function and check the result
// 4. Time-travel debugging: replay state = replay same output

function oldSum() {
  console.log(arguments);         // Arguments [1, 2, 3] — array-LIKE object
  console.log(Array.isArray(arguments)); // false — NOT a real array!

  // Can't use array methods directly:
  arguments.map(...);   // ❌ TypeError — no map method

  // Must convert to array first:
  const args = Array.from(arguments);      // ES6 way
  const args2 = [...arguments];           // spread way
  const args3 = Array.prototype.slice.call(arguments); // old way
  return args.reduce((a, b) => a + b, 0);
}
oldSum(1, 2, 3); // 6

// arguments is NOT available in arrow functions!
const arrowFn = () => console.log(arguments); // ReferenceError or outer arguments

// ✅ Rest parameters — a real Array, works in any function type
const sum = (...nums) => nums.reduce((a, b) => a + b, 0);
sum(1, 2, 3, 4); // 10

// Rest must be last parameter — collects REMAINING args
function logWithPrefix(prefix, ...messages) {
  messages.forEach(msg => console.log(`[${prefix}] ${msg}`));
}
logWithPrefix('INFO', 'Started', 'Ready', 'Listening');

// ── Comparison ──
// arguments: array-like, no arrow support, contains ALL args, has .callee/.caller
// rest ...x : real Array, works everywhere, collects only named remainder
// Always prefer rest parameters in new code

function myNew(Constructor, ...args) {
  // Step 1 + 2: Create object linked to Constructor.prototype
  const obj = Object.create(Constructor.prototype);

  // Step 3: Call constructor with new object as 'this'
  const returnVal = Constructor.apply(obj, args);

  // Step 4: Return object unless constructor returned a different object
  return returnVal instanceof Object ? returnVal : obj;
}

// ── Verify it works ──
function Person(name, age) {
  this.name = name;
  this.age  = age;
}
Person.prototype.greet = function() {
  return `Hi, I'm ${this.name}`;
};

const p1 = new Person('Alice', 30);
const p2 = myNew(Person, 'Alice', 30);

p2.greet();                     // "Hi, I'm Alice" ✅
p2 instanceof Person;           // true ✅
Object.getPrototypeOf(p2) === Person.prototype; // true ✅

// ── The return-value rule — when constructor returns an object ──
function Tricky() {
  this.x = 1;
  return { y: 2 }; // returns a DIFFERENT object
}
const t = new Tricky();
console.log(t); // { y: 2 } — constructor's returned object wins
// But if constructor returns a primitive, it's ignored:
function ReturnNum() { this.x = 1; return 42; }
new ReturnNum(); // { x: 1 } — primitive return ignored

const animal = {
  breathe() { return 'inhale... exhale'; }
};

const dog = Object.create(animal); // dog's [[Prototype]] = animal
dog.name = 'Rex';                  // own property

const rex = Object.create(dog);   // rex's [[Prototype]] = dog

// Lookup: rex.name
// Step 1: rex has no own 'name' property
// Step 2: walk to dog → dog has own 'name' = 'Rex' ✅
console.log(rex.name);           // 'Rex'

// Lookup: rex.breathe
// Step 1: rex has no 'breathe'
// Step 2: dog has no 'breathe'
// Step 3: animal has 'breathe' ✅
console.log(rex.breathe());       // 'inhale... exhale'

// Lookup: rex.fly
// Chain: rex → dog → animal → Object.prototype → null
// Not found anywhere → undefined
console.log(rex.fly);             // undefined

// Visualise the chain:
console.log(Object.getPrototypeOf(rex)  === dog);            // true
console.log(Object.getPrototypeOf(dog)  === animal);         // true
console.log(Object.getPrototypeOf(animal) === Object.prototype); // true
console.log(Object.getPrototypeOf(Object.prototype));          // null

const proto  = { x: 1 };
const child  = Object.create(proto);

// GET: walks the chain
console.log(child.x); // 1  — found on proto

// SET: always creates an OWN property on the object — never modifies prototype
child.x = 99;
console.log(child.x);  // 99  — own property now shadows the prototype
console.log(proto.x);  // 1   — prototype untouched

// This shadowing is important: writing never pollutes the prototype chain

function Animal(name) { this.name = name; }
Animal.prototype.speak = function() { return `${this.name} speaks`; };

const cat = new Animal('Mimi');

// ── __proto__ (deprecated) — the [[Prototype]] of the INSTANCE ──
cat.__proto__ === Animal.prototype;  // true

// ── Object.getPrototypeOf (preferred) — same thing, correct API ──
Object.getPrototypeOf(cat) === Animal.prototype; // true

// ── Fn.prototype — only on FUNCTION objects ──
// Animal.prototype is the object that becomes instances' [[Prototype]]
console.log(Animal.prototype);         // { speak: [Function], constructor: Animal }
console.log(Animal.prototype.constructor === Animal); // true

// ── Common confusion: prototype of the function ITSELF ──
Object.getPrototypeOf(Animal) === Function.prototype; // true
// Animal.__proto__ = Function.prototype (because Animal is a function object)
// Animal.prototype = the shared object for instances (separate thing!)

// Mental map:
// cat.__proto__          === Animal.prototype   (instance → constructor's prototype)
// Animal.__proto__        === Function.prototype (function → Function's prototype)
// Function.prototype.__proto__ === Object.prototype  (chain continues)

// Implementing Object.create from scratch (to understand it)
function myCreate(proto) {
  function F() {}       // temp constructor
  F.prototype = proto;  // set its prototype to desired proto
  return new F();        // new instance inherits from proto
}

// ── Basic usage ──
const vehicleProto = {
  describe() { return `I am a ${this.type} with ${this.wheels} wheels`; }
};

const car = Object.create(vehicleProto);
car.type   = 'car';
car.wheels = 4;
car.describe(); // "I am a car with 4 wheels"

// ── Prototypal inheritance chain ──
const animal = {
  init(name) { this.name = name; return this; },
  eat()       { return `${this.name} eats`; }
};

const dog = Object.create(animal);  // dog inherits from animal
dog.bark = function() { return `${this.name} barks`; };

const rex = Object.create(dog).init('Rex'); // rex inherits from dog
rex.eat();   // "Rex eats"  — from animal
rex.bark();  // "Rex barks" — from dog

// Object.create(null) — object with NO prototype (covered in Q10)
const pureMap = Object.create(null);
console.log(pureMap.toString); // undefined — no inherited methods at all

const obj = {};

// Data descriptor — value + writable + enumerable + configurable
Object.defineProperty(obj, 'id', {
  value:        42,
  writable:     false,  // cannot reassign
  enumerable:   false,  // hidden from for...in / Object.keys
  configurable: false   // cannot delete or redefine
});

obj.id = 99;            // silently fails (throws in strict mode)
console.log(obj.id);    // 42 — unchanged
Object.keys(obj);       // [] — 'id' not enumerable
delete obj.id;          // false — not configurable

// Inspect a descriptor
Object.getOwnPropertyDescriptor(obj, 'id');
// { value: 42, writable: false, enumerable: false, configurable: false }

// Default descriptor for assignment-created properties (ALL true):
const plain = { x: 1 };
Object.getOwnPropertyDescriptor(plain, 'x');
// { value: 1, writable: true, enumerable: true, configurable: true }

const person = { _firstName: 'Alice', _lastName: 'Smith' };

Object.defineProperty(person, 'fullName', {
  get() {
    return `${this._firstName} ${this._lastName}`;
  },
  set(val) {
    [this._firstName, this._lastName] = val.split(' ');
  },
  enumerable: true,
  configurable: true
});

console.log(person.fullName);   // 'Alice Smith' — triggers get()
person.fullName = 'Bob Jones'; // triggers set()
console.log(person._firstName); // 'Bob'

// Class syntax equivalent (shorthand for Object.defineProperty under the hood)
class Circle {
  constructor(r) { this._r = r; }
  get area()    { return Math.PI * this._r ** 2; }
  set radius(v)  { if (v < 0) throw Error('negative'); this._r = v; }
}

const config = Object.freeze({
  host: 'localhost',
  port: 3000,
  db: { name: 'mydb' }  // ← nested object
});

config.port = 8080;      // silently fails — writable: false
delete config.host;     // silently fails — configurable: false
config.newProp = 'x';   // silently fails — not extensible
console.log(config.port); // 3000 — unchanged ✅

// ⚠ freeze is SHALLOW — nested objects are NOT frozen!
config.db.name = 'hacked'; // ✅ this WORKS — db is a different object
console.log(config.db.name); // 'hacked'

// Deep freeze — recursive solution
function deepFreeze(obj) {
  Object.getOwnPropertyNames(obj).forEach(name => {
    const val = obj[name];
    if (typeof val === 'object' && val !== null) deepFreeze(val);
  });
  return Object.freeze(obj);
}

// Check frozen/sealed state
Object.isFrozen(config);  // true
Object.isSealed(config);  // true  (frozen implies sealed)

// ── Parent Constructor ──
function Shape(color) {
  this.color = color;
}
Shape.prototype.getColor = function() {
  return this.color;
};
Shape.prototype.describe = function() {
  return `A ${this.color} shape`;
};

// ── Child Constructor ──
function Circle(color, radius) {
  Shape.call(this, color);  // Step 1: call parent constructor with child's 'this'
  this.radius = radius;
}

// Step 2: set up prototype chain — Circle.prototype inherits from Shape.prototype
Circle.prototype = Object.create(Shape.prototype);
// Step 3: repair the constructor reference (broken by Object.create)
Circle.prototype.constructor = Circle;

// Step 4: add child-specific methods
Circle.prototype.area = function() {
  return Math.PI * this.radius ** 2;
};
Circle.prototype.describe = function() {  // override parent method
  return `A ${this.color} circle of radius ${this.radius}`;
};

// ── Usage ──
const c = new Circle('red', 5);
c.getColor();       // 'red'    — inherited from Shape.prototype
c.describe();       // 'A red circle of radius 5' — overridden
c.area();           // 78.54...  — own method
c instanceof Circle; // true
c instanceof Shape;  // true — chain includes Shape.prototype

// ES6 class equivalent (same behaviour, cleaner syntax):
class CircleES6 extends Shape {
  constructor(color, radius) {
    super(color);   // ← equivalent to Shape.call(this, color)
    this.radius = radius;
  }
  area() { return Math.PI * this.radius ** 2; }
}

function Animal(name) { this.name = name; }
Animal.prototype.type = 'animal';
Animal.prototype.speak = function() { return '...'; };

const dog = new Animal('Rex');
dog.breed = 'Labrador';

// ── Checking ownership ──
dog.hasOwnProperty('name');   // true  — own
dog.hasOwnProperty('breed');  // true  — own
dog.hasOwnProperty('type');   // false — inherited from Animal.prototype
dog.hasOwnProperty('speak');  // false — inherited

// Modern alternative (safer for Object.create(null) objects):
Object.hasOwn(dog, 'name');    // true  — ES2022, doesn't fail on null-proto objects

// ── 'in' operator — checks own AND inherited ──
'name'  in dog;  // true  — own
'type'  in dog;  // true  — inherited
'wings' in dog;  // false — not anywhere in chain

// ── Enumeration methods comparison ──
Object.keys(dog);              // ['name','breed']   — OWN + ENUMERABLE only
Object.values(dog);            // ['Rex','Labrador'] — OWN + ENUMERABLE only
Object.entries(dog);           // [['name','Rex'],['breed','Labrador']]

Object.getOwnPropertyNames(dog); // ['name','breed']   — OWN (incl. non-enumerable)

for (const key in dog) {
  console.log(key);             // 'name','breed','type','speak' — own + inherited enumerable
}

// Correct pattern: for...in with hasOwn guard
for (const key in dog) {
  if (Object.hasOwn(dog, key)) console.log(key); // 'name','breed' only
}

// Implementing instanceof from scratch
function myInstanceof(obj, Constructor) {
  let proto = Object.getPrototypeOf(obj);
  while (proto !== null) {
    if (proto === Constructor.prototype) return true;
    proto = Object.getPrototypeOf(proto);
  }
  return false;
}

function A() {}
function B() {}
B.prototype = Object.create(A.prototype);

const b = new B();
myInstanceof(b, B); // true
myInstanceof(b, A); // true  — A.prototype is up the chain

// instanceof can be fooled — it checks the prototype, not the constructor
const fake = Object.create(B.prototype);  // never called new B()
fake instanceof B;  // true — prototype chain matches

// ❌ Limitation 1: fails for primitive wrapper types
"hello" instanceof String;  // false — "hello" is a primitive, not an object
42      instanceof Number;  // false

// ❌ Limitation 2: cross-realm failure (iframes, vm module)
// An array from an iframe has Array !== window.Array
// iframeArr instanceof Array === false ← wrong!
// ✅ Fix: Array.isArray() works across realms
Array.isArray(iframeArr); // true ✅

// ❌ Limitation 3: doesn't work on null/undefined
null instanceof Object;  // false — null has no prototype chain

// ✅ Custom instanceof — Symbol.hasInstance
class EvenNumber {
  static [Symbol.hasInstance](num) {
    return typeof num === 'number' && num % 2 === 0;
  }
}
console.log(4  instanceof EvenNumber); // true  ← custom logic!
console.log(7  instanceof EvenNumber); // false

// ── Approach 1: Object.assign mixin (simple, shallow copy) ──
const Serializable = {
  serialize()   { return JSON.stringify(this); },
  deserialize(s) { return Object.assign(this, JSON.parse(s)); }
};

const Validatable = {
  validate() {
    return Object.keys(this).every(k => this[k] !== null);
  }
};

class User {
  constructor(name, email) {
    this.name  = name;
    this.email = email;
  }
}

// Mix behaviours INTO the prototype
Object.assign(User.prototype, Serializable, Validatable);

const u = new User('Alice', 'a@b.com');
u.serialize();  // '{"name":"Alice","email":"a@b.com"}'
u.validate();   // true

// ── Approach 2: Functional Mixin (factory, preferred pattern) ──
const withLogging = (Base) => class extends Base {
  log(msg) { console.log(`[${this.constructor.name}] ${msg}`); }
};

const withTimestamps = (Base) => class extends Base {
  constructor(...args) {
    super(...args);
    this.createdAt = new Date();
  }
};

class BaseModel { save() { return 'saved'; } }

// Compose: User gets both logging and timestamps
class UserModel extends withLogging(withTimestamps(BaseModel)) {
  constructor(name) { super(); this.name = name; }
}

const user = new UserModel('Alice');
user.log('created');   // [UserModel] created
console.log(user.createdAt); // Date object

const normal = {};
const pure   = Object.create(null);

console.log(Object.getPrototypeOf(normal)); // Object.prototype
console.log(Object.getPrototypeOf(pure));   // null

normal.toString();          // "[object Object]" — inherited
pure.toString();            // ❌ TypeError: pure.toString is not a function
pure.hasOwnProperty('x'); // ❌ TypeError — use Object.hasOwn(pure, 'x') instead

// ── Use Case 1: Safe dictionary / hash map ──
// Regular object is vulnerable to prototype pollution:
const dict = {};
dict['__proto__']  = 'hacked'; // ⚠ could affect the prototype
dict['toString']   = 'shadow'; // shadows inherited method
'toString' in dict;           // true — can't tell own from inherited

// Object.create(null) — zero risk of collision
const safeMap = Object.create(null);
safeMap.toString = 'my value';   // just a key — no prototype shadow
'toString' in safeMap;           // true ONLY if explicitly set
for (const key in safeMap) { ... } // only own keys — no prototype noise

// ── Use Case 2: Preventing prototype pollution attacks ──
// Malicious JSON: {"__proto__": {"isAdmin": true}}
// If parsed into a regular object, Object.prototype.isAdmin becomes true
// Object.create(null) target is immune — has no [[Prototype]] to pollute

// ── Use Case 3: Performance — inline cache friendly ──
// V8 can use a single hidden class for a null-proto object used as a lookup
// table — no prototype chain to walk for every lookup

// ── Object.create(null) vs Map ──
// Object.create(null): string/symbol keys, JSON-serializable, prototype-safe
// Map: any key type, ordered, has size, better for frequent add/delete