// var: function-scoped, hoisted as undefined
// let: block-scoped, hoisted but in Temporal Dead Zone
// const: block-scoped, cannot be reassigned

function test() {
  if (true) {
    var a = 1;    // accessible outside if block
    let b = 2;    // only inside if block
    const c = 3;  // only inside if block
  }
  console.log(a); // 1
  console.log(b); // ReferenceError
}

// Hoisting behavior:
console.log(x); // undefined (var is hoisted)
console.log(y); // ReferenceError (let is in TDZ)
var x = 5;
let y = 10;

// const with objects — the reference is constant,
// not the value:
const obj = { name: "JS" };
obj.name = "JavaScript"; // Works fine
obj = {};                // TypeError

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1000);
}
// Output: 3, 3, 3 (not 0, 1, 2)
// Why: var is function-scoped, so all callbacks
// share the same 'i' which is 3 after the loop

// Fix with let:
for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1000);
}
// Output: 0, 1, 2
// Why: let creates a new binding for each iteration

// Fix with IIFE (older approach):
for (var i = 0; i < 3; i++) {
  (function(j) {
    setTimeout(() => console.log(j), 1000);
  })(i);
}
// Output: 0, 1, 2

// Basic closure:
function outer() {
  let count = 0;
  return function inner() {
    count++;
    return count;
  };
}
const counter = outer();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3
// 'count' persists because inner() closes over it

// Practical use: private variables
function createBankAccount(initialBalance) {
  let balance = initialBalance; // private
  return {
    deposit(amount) {
      balance += amount;
      return balance;
    },
    withdraw(amount) {
      if (amount > balance) return "Insufficient funds";
      balance -= amount;
      return balance;
    },
    getBalance() {
      return balance;
    }
  };
}
const account = createBankAccount(1000);
account.deposit(500);    // 1500
account.withdraw(200);   // 1300
// account.balance       // undefined (private!)

function createFunctions() {
  const result = [];
  for (var i = 0; i < 3; i++) {
    result.push(function() { return i; });
  }
  return result;
}
const fns = createFunctions();
console.log(fns[0]()); // 3 (not 0!)
console.log(fns[1]()); // 3 (not 1!)
console.log(fns[2]()); // 3 (not 2!)

// All functions close over the SAME 'i' variable
// By the time they execute, i is already 3

// Fix: use let instead of var
// Or use an IIFE to capture each value

// Execution order:
// 1. Synchronous code runs first (call stack)
// 2. Microtasks run next (Promises, queueMicrotask)
// 3. Macrotasks run last (setTimeout, setInterval)

console.log("1");                    // sync

setTimeout(() => console.log("2"), 0); // macrotask

Promise.resolve().then(() => 
  console.log("3")                   // microtask
);

console.log("4");                    // sync

// Output: 1, 4, 3, 2
// Even though setTimeout has 0ms delay,
// the Promise callback runs first because
// microtasks have priority over macrotasks

console.log("start");

setTimeout(() => console.log("timeout"), 0);

Promise.resolve()
  .then(() => console.log("promise 1"))
  .then(() => console.log("promise 2"));

queueMicrotask(() => console.log("microtask"));

console.log("end");

// Output:
// start
// end
// promise 1
// microtask
// promise 2
// timeout

// Explanation:
// 1. "start" and "end" — synchronous, run first
// 2. "promise 1" — microtask, runs after sync
// 3. "microtask" — also microtask, queued after promise 1
// 4. "promise 2" — chained promise, new microtask
// 5. "timeout" — macrotask, runs after all microtasks

// Pending  → initial state
// Fulfilled → resolved successfully
// Rejected  → failed with an error

// Once settled (fulfilled or rejected), 
// a Promise cannot change state

const promise = new Promise((resolve, reject) => {
  // async operation
  const success = true;
  if (success) {
    resolve("Data loaded");  // → fulfilled
  } else {
    reject("Failed to load"); // → rejected
  }
});

promise
  .then(data => console.log(data))   // "Data loaded"
  .catch(err => console.error(err))
  .finally(() => console.log("Done")); // always runs

const p1 = Promise.resolve(1);
const p2 = Promise.reject("error");
const p3 = Promise.resolve(3);

// Promise.all — fails fast on first rejection
Promise.all([p1, p2, p3])
  .catch(err => console.log(err)); // "error"

// Promise.allSettled — waits for ALL to settle
Promise.allSettled([p1, p2, p3])
  .then(results => console.log(results));
// [{status:"fulfilled", value:1},
//  {status:"rejected", reason:"error"},
//  {status:"fulfilled", value:3}]

// Promise.race — first to settle wins
Promise.race([p1, p2, p3])
  .then(val => console.log(val)); // 1

// Promise.any — first to FULFILL wins
Promise.any([p2, p1, p3])
  .then(val => console.log(val)); // 1 (skips p2)

// When to use which:
// .all     → parallel API calls, all must succeed
// .allSettled → parallel calls, need all results
// .race    → timeout patterns
// .any     → first successful response wins

// Callback hell:
getUser(id, (user) => {
  getOrders(user.id, (orders) => {
    getOrderDetails(orders[0].id, (details) => {
      console.log(details);
    });
  });
});

// With async/await:
async function getOrderInfo(id) {
  try {
    const user = await getUser(id);
    const orders = await getOrders(user.id);
    const details = await getOrderDetails(orders[0].id);
    return details;
  } catch (error) {
    console.error("Failed:", error.message);
    throw error; // re-throw for caller to handle
  }
}

// Key rule: async/await is syntactic sugar over
// Promises. Every async function returns a Promise.

// 1. Global context
console.log(this); // window (browser) / global (Node)

// 2. Object method
const obj = {
  name: "JS",
  greet() { console.log(this.name); }
};
obj.greet(); // "JS" — this = obj

// 3. Regular function
function show() { console.log(this); }
show(); // window (non-strict) / undefined (strict)

// 4. Arrow function — inherits from parent scope
const obj2 = {
  name: "JS",
  greet: () => { console.log(this.name); }
};
obj2.greet(); // undefined! Arrow doesn't have own 'this'

// 5. Event handler
button.addEventListener("click", function() {
  console.log(this); // the button element
});
button.addEventListener("click", () => {
  console.log(this); // window! Arrow inherits outer this
});

// 6. call, apply, bind — explicitly set 'this'
function greet() { console.log(this.name); }
const user = { name: "Rahul" };
greet.call(user);    // "Rahul"
greet.apply(user);   // "Rahul"
const bound = greet.bind(user);
bound();             // "Rahul"

function introduce(greeting, punctuation) {
  console.log(greeting + ", " + this.name + punctuation);
}
const person = { name: "Priya" };

// call — invokes immediately, args as list
introduce.call(person, "Hello", "!");
// "Hello, Priya!"

// apply — invokes immediately, args as array
introduce.apply(person, ["Hi", "."]);
// "Hi, Priya."

// bind — returns NEW function, does not invoke
const boundFn = introduce.bind(person, "Hey");
boundFn("?"); // "Hey, Priya?"

// Memory trick:
// Call = Comma separated args
// Apply = Array of args
// Bind = returns Bound function

// Every JS object has a hidden [[Prototype]] link
// When you access a property, JS looks up the chain

const animal = {
  eat() { return "eating"; }
};

const dog = Object.create(animal);
dog.bark = function() { return "woof"; };

dog.bark(); // "woof" — found on dog
dog.eat();  // "eating" — found on animal (prototype)

// Prototype chain: dog → animal → Object.prototype → null

// ES6 class (syntactic sugar):
class Animal {
  eat() { return "eating"; }
}
class Dog extends Animal {
  bark() { return "woof"; }
}
// Under the hood, this creates the same prototype chain

// .prototype — property on constructor FUNCTIONS
// .__proto__ — property on INSTANCES (the actual link)

function Person(name) {
  this.name = name;
}
Person.prototype.greet = function() {
  return "Hi, " + this.name;
};

const p = new Person("Amit");
p.__proto__ === Person.prototype; // true
p.greet(); // "Hi, Amit"

// Modern way to access prototype:
Object.getPrototypeOf(p) === Person.prototype; // true

// Instead of adding listeners to each child,
// add ONE listener to the parent

// Bad: listener on every button
document.querySelectorAll(".btn").forEach(btn => {
  btn.addEventListener("click", handleClick);
});

// Good: event delegation
document.querySelector(".btn-container")
  .addEventListener("click", (e) => {
    if (e.target.matches(".btn")) {
      handleClick(e);
    }
  });

// Why it matters:
// 1. Works for dynamically added elements
// 2. Uses less memory (1 listener vs N listeners)
// 3. Better performance for large lists

// Capturing: event goes DOWN from window to target
// Bubbling: event goes UP from target to window

// Default is bubbling
parent.addEventListener("click", () => {
  console.log("parent");
});
child.addEventListener("click", () => {
  console.log("child");
});
// Click child → "child", "parent" (bubbles up)

// Enable capturing with third argument:
parent.addEventListener("click", () => {
  console.log("parent");
}, true); // capturing phase
// Click child → "parent", "child" (captures down)

// Stop propagation:
child.addEventListener("click", (e) => {
  e.stopPropagation(); // prevents bubbling
  console.log("child only");
});

// Debounce: wait until user STOPS doing something
function debounce(fn, delay) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}
// Use: search input — wait until user stops typing
const search = debounce(fetchResults, 300);

// Throttle: execute at most once per interval
function throttle(fn, limit) {
  let inThrottle = false;
  return function(...args) {
    if (!inThrottle) {
      fn.apply(this, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}
// Use: scroll handler — fire at most every 200ms
window.addEventListener("scroll", throttle(onScroll, 200));