call, apply, bind

call  → invoke immediately, pass args with commas
apply → invoke immediately, pass args as array
bind  → returns NEW function with this preset (doesn't invoke)

call  → Comma separated args
apply → Array of args
bind  → Binds and returns new function

function greet(greeting, punctuation) {
  console.log(`${greeting}, I'm ${this.name}${punctuation}`);
}

const user = { name: "Shiva" };

greet.call(user, "Hello", "!"); // "Hello, I'm Shiva!"

const arr = [1, 2, 3];
const max = Math.max.call(null, ...arr); // 3

// Borrow array methods for array-like objects
function example() {
  // `arguments` is array-like, not a real array
  const args = Array.prototype.slice.call(arguments);
  console.log(args); // now a real array
}

greet.apply(user, ["Hello", "!"]); // "Hello, I'm Shiva!"

// Useful when you already have an array of args
const args = ["Hi", "?"];
greet.apply(user, args);

const numbers = [5, 2, 8, 1, 9];

// Before spread operator existed, apply was the way:
Math.max.apply(null, numbers); // 9

// Modern: use spread instead
Math.max(...numbers); // 9

const boundGreet = greet.bind(user, "Hey");

boundGreet("!"); // "Hey, I'm Shiva!"
boundGreet("?"); // "Hey, I'm Shiva?"
// "Hey" was preset by bind, only punctuation changes

class Button {
  constructor(label) {
    this.label = label;
  }

  handleClick() {
    console.log(`${this.label} clicked`);
  }

  mount() {
    const btn = document.querySelector("button");

    // ❌ `this` will be the button element, not the class
    btn.addEventListener("click", this.handleClick);

    // ✅ Fix with bind
    btn.addEventListener("click", this.handleClick.bind(this));

    // ✅ Fix with arrow function
    btn.addEventListener("click", () => this.handleClick());
  }
}

function multiply(a, b) {
  return a * b;
}

const double = multiply.bind(null, 2);  // a is always 2
const triple = multiply.bind(null, 3);  // a is always 3

double(5);  // 10
triple(5);  // 15

Function.prototype.myCall = function (context = globalThis, ...args) {
  const key = Symbol(); // unique key to avoid overwriting
  context[key] = this;  // attach function to context
  const result = context[key](...args);
  delete context[key];  // clean up
  return result;
};

// Test
greet.myCall(user, "Hello", "!"); // "Hello, I'm Shiva!"

Function.prototype.myApply = function (context = globalThis, args = []) {
  const key = Symbol();
  context[key] = this;
  const result = context[key](...args);
  delete context[key];
  return result;
};

Function.prototype.myBind = function (context, ...bindArgs) {
  const fn = this;
  return function (...callArgs) {
    return fn.apply(context, [...bindArgs, ...callArgs]);
  };
};

function greet() {
  return this.name;
}

const fn1 = greet.bind({ name: "First" });
const fn2 = fn1.bind({ name: "Second" });

fn2(); // ?