JavaScript call, apply, and bind Explained

const user = {
  name: "Rahul",
  greet() {
    console.log(`Hello, I'm ${this.name}`);
  }
};

user.greet(); // "Hello, I'm Rahul" ✅

const greetFn = user.greet;
greetFn(); // "Hello, I'm undefined" ❌ (this lost!)

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

const rahul = { name: "Rahul" };
const priya = { name: "Priya" };

greet.call(rahul, "Hello", "!");  // "Hello, I'm Rahul!"
greet.call(priya, "Hi", ".");     // "Hi, I'm Priya."

// Arguments passed individually

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

// Practical use: finding max in array
const numbers = [5, 2, 8, 1, 9];
Math.max.apply(null, numbers); // 9

// Modern alternative: spread operator
Math.max(...numbers); // 9

const greetRahul = greet.bind(rahul);
greetRahul("Hey", "!"); // "Hey, I'm Rahul!"

// Partial application
const helloRahul = greet.bind(rahul, "Hello");
helloRahul("!"); // "Hello, I'm Rahul!"

// Common in React (class components)
class App extends React.Component {
  constructor() {
    super();
    this.handleClick = this.handleClick.bind(this);
  }
}

// Implement bind from scratch
Function.prototype.myBind = function(context, ...args) {
  const fn = this;
  return function(...newArgs) {
    return fn.apply(context, [...args, ...newArgs]);
  };
};

// Implement call
Function.prototype.myCall = function(context, ...args) {
  context = context || globalThis;
  const sym = Symbol();
  context[sym] = this;
  const result = context[sym](...args);
  delete context[sym];
  return result;
};

const arrow = () => console.log(this);
arrow.call({ name: "Rahul" }); // Still window/global, not { name: "Rahul" }