📞 Function.prototype.apply() Polyfill

The apply method in JavaScript is similar to call, except that it takes arguments as an array.

1️⃣ Understanding Function.prototype.apply

Native behavior:

function greet(age, city) {
  console.log(`Hello, my name is ${this.name}, I am ${age} years old, and I live in ${city}.`);
}

const person = { name: "Alice" };
greet.apply(person, [25, "New York"]);

📌 Difference from call :

• call(context, arg1, arg2, arg3, ...) → Arguments are passed individually.
• apply(context, [arg1, arg2, arg3, ...]) → Arguments are passed as an array.

2️⃣ Polyfill for apply

We need to:

• Attach the function to the thisArg (context).
• Pass the arguments as an array.
• Remove the temporary function reference.

Function.prototype.myApply = function (context, args) {
  if (typeof this !== "function") {
    throw new TypeError("myApply can only be used on functions");
  }

  context = context || globalThis; // Default to global (window in browser, global in Node.js)

  const fnKey = Symbol(); // Unique key to avoid property collisions
  context[fnKey] = this; // Assign function to context
  
  const result = context[fnKey](...(args || [])); // Invoke function with spread operator
  
  delete context[fnKey]; // Cleanup

  return result;
};

3️⃣ Testing the Polyfill

function greet(age, city) {
  console.log(`Hello, my name is ${this.name}, I am ${age} years old, and I live in ${city}.`);
}

const person = { name: "Bob" };

greet.myApply(person, [30, "Los Angeles"]);
// Output: Hello, my name is Bob, I am 30 years old, and I live in Los Angeles.

4️⃣ Dry Run Step-by-Step

Let's break it down for:

greet.myApply(person, [30, "Los Angeles"]);

📌 Step 1: Call myApply

greet.myApply(person, [30, "Los Angeles"]);

• this inside myApply refers to greet.
• context = person ({ name: "Bob" }).
• args = [30, "Los Angeles"].

📌 Step 2: Function Definition Breakdown

Inside myApply:

Function.prototype.myApply = function (context, args) {
  if (typeof this !== "function") {
    throw new TypeError("myApply can only be used on functions");
  }

✅ this is greet (a function), so no error.

📌 Step 3: Set context

context = context || globalThis;

• context = person.

📌 Step 4: Attach Function Temporarily

const fnKey = Symbol();
context[fnKey] = this;

• A unique property is added to person:

  {
    name: "Bob",
    [Symbol(fnKey)]: function greet(age, city) { ... }
  }

📌 Step 5: Invoke Function

const result = context[fnKey](...(args || []));

• Equivalent to:

  person ;

• Since this is now person, it prints:

  Hello, my name is Bob, I am 30 years old, and I live in Los Angeles.
  

📌 Step 6: Cleanup

delete context[fnKey];

• Removes the temporary function from person, restoring it to:

  { name: "Bob" }

📌 Final Execution Summary

✅ Works just like the native apply method!