📞 Function.prototype.apply() Polyfill

jspolyfillsmedium

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

Step	Action
1️⃣	`greet.myApply(person, [30, "Los Angeles"])`is called
2️⃣	`context = person`
3️⃣	`Symbol(fnKey)`is created and assigned to `person[Symbol(fnKey)] = greet`
4️⃣	`person` is invoked, printing `"Hello, my name is Bob, I am 30 years old, and I live in Los Angeles."`
5️⃣	Temporary function property is deleted

✅ Works just like the native apply method!

Quick Quiz

Test your understanding with 3 quick questions

Q1What is the main difference between `call()` and `apply()`?

Q2Why is a `Symbol` used as the function key in the polyfill?

Q3What does `apply()` return?

📞 Function.prototype.apply() Polyfill

jspolyfillsmedium

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

Step	Action
1️⃣	`greet.myApply(person, [30, "Los Angeles"])`is called
2️⃣	`context = person`
3️⃣	`Symbol(fnKey)`is created and assigned to `person[Symbol(fnKey)] = greet`
4️⃣	`person` is invoked, printing `"Hello, my name is Bob, I am 30 years old, and I live in Los Angeles."`
5️⃣	Temporary function property is deleted

✅ Works just like the native apply method!

Quick Quiz

Test your understanding with 3 quick questions

Q1What is the main difference between `call()` and `apply()`?

Q2Why is a `Symbol` used as the function key in the polyfill?

Q3What does `apply()` return?

📞 Function.prototype.apply() Polyfill

1️⃣ Understanding Function.prototype.apply

2️⃣ Polyfill for apply

3️⃣ Testing the Polyfill

4️⃣ Dry Run Step-by-Step

📌 Step 1: Call myApply

📌 Step 2: Function Definition Breakdown

📌 Step 3: Set context

📌 Step 4: Attach Function Temporarily

📌 Step 5: Invoke Function

📌 Step 6: Cleanup

📌 Final Execution Summary

Continue Reading

🛑 AbortController: Canceling Async Operations in JavaScript

🔒 Closures in JavaScript — The Complete Guide

📦 Understanding ES6 Modules in JavaScript

📞 Function.prototype.apply() Polyfill

1️⃣ Understanding Function.prototype.apply

2️⃣ Polyfill for apply

3️⃣ Testing the Polyfill

4️⃣ Dry Run Step-by-Step

📌 Step 1: Call myApply

📌 Step 2: Function Definition Breakdown

📌 Step 3: Set context

📌 Step 4: Attach Function Temporarily

📌 Step 5: Invoke Function

📌 Step 6: Cleanup

📌 Final Execution Summary

Continue Reading

🛑 AbortController: Canceling Async Operations in JavaScript

🔒 Closures in JavaScript — The Complete Guide

📦 Understanding ES6 Modules in JavaScript

1️⃣ Understanding `Function.prototype.apply`

2️⃣ Polyfill for `apply`

📌 Step 1: Call `myApply`

📌 Step 3: Set `context`

1️⃣ Understanding `Function.prototype.apply`

2️⃣ Polyfill for `apply`

📌 Step 1: Call `myApply`

📌 Step 3: Set `context`