https://store.nandan.dev/l/javascript-interview-prep-handbook?embedable=true https://store.nandan.dev/l/javascript-interview-prep-handbook?embedable=true Okay, so if you have ever deep-dived into JavaScript interviews or just casually scrolled through dev Twitter (yes, that’s a thing), you would have stumbled upon someone throwing around the words polyfill like they were born building web browsers. polyfill And if you’re like me, you probably nodded along, opened a tab to Google it later, and… procrastinated. But no worries. You’re here now, and we are going to figure this out together. together. First things first — What the heck is a polyfill? First things first — What the heck is a polyfill? A polyfill is just a piece of code (usually JavaScript) that adds functionality to older browsers that do not natively support a certain feature. polyfill adds functionality to older browsers Think of it like you bringing a power bank to an event where there are no charging points. Your phone is old? No problem. You got the backup. Now… Why Call, Apply, and Bind? Now… Why Call, Apply, and Bind? Because they’re like the Avengers of function manipulation in JavaScript. And also because they confuse almost everyone at first. call lets you call a function with a given this value and arguments.
apply is like call, but arguments are passed as an array.
bind doesn’t immediately invoke the function. It returns a new function with a given this. call lets you call a function with a given this value and arguments. call apply is like call, but arguments are passed as an array. apply call bind doesn’t immediately invoke the function. It returns a new function with a given this. bind returns a new function Here is a detailed write-up on call, apply & bind. Here is a detailed write-up on call, apply & bind Simple enough, right? Now let’s make our versions Polyfill for call Polyfill for call Here’s how we can build a polyfill for call: polyfill for call Function.prototype.myCall = function(context,...args){ 
    context = context || globalThis;
    let Symbolfn = Symbol("fn"); // Unique key
    context[Symbolfn] = this; // Assign 'this' function to the context
    let result = context[Symbolfn](...args); // Call the function
    delete context[Symbolfn];  // Clean up
    return result;
}

// Usage
function sayHello(greeting) {
  console.log(`${greeting}, ${this.name}`);
}

const user = { name: "Nandan" };
sayHello.myCall(user, "Hello"); Function.prototype.myCall = function(context,...args){ 
    context = context || globalThis;
    let Symbolfn = Symbol("fn"); // Unique key
    context[Symbolfn] = this; // Assign 'this' function to the context
    let result = context[Symbolfn](...args); // Call the function
    delete context[Symbolfn];  // Clean up
    return result;
}

// Usage
function sayHello(greeting) {
  console.log(`${greeting}, ${this.name}`);
}

const user = { name: "Nandan" };
sayHello.myCall(user, "Hello"); Cool, right? Not rocket science. Polyfill for apply Polyfill for apply Now, let’s tweak it a bit for apply: apply Function.prototype.myApply = function(context,args){
    context = context || globalThis;
    let Symbolfn = Symbol("fn");
    context[Symbolfn] = this;
    let result = args ? context[Symbolfn](...args) : context[Symbolfn]();
    delete context[Symbolfn];
    return result;
}

// Usage
sayHello.myApply(user, ["Hi"]); Function.prototype.myApply = function(context,args){
    context = context || globalThis;
    let Symbolfn = Symbol("fn");
    context[Symbolfn] = this;
    let result = args ? context[Symbolfn](...args) : context[Symbolfn]();
    delete context[Symbolfn];
    return result;
}

// Usage
sayHello.myApply(user, ["Hi"]); Polyfill for bind Polyfill for bind Now comes the big boss bind. bind Function.prototype.myBind = function(context,...initialArgs){
    let fn = this;
    return function(...functArgs){
        return fn.apply(context, [...initialArgs,...functArgs])
    }
}

// Usage
const boundSayHello = sayHello.myBind(user, "Hey");
boundSayHello(); // Outputs: Hey, Nandan Function.prototype.myBind = function(context,...initialArgs){
    let fn = this;
    return function(...functArgs){
        return fn.apply(context, [...initialArgs,...functArgs])
    }
}

// Usage
const boundSayHello = sayHello.myBind(user, "Hey");
boundSayHello(); // Outputs: Hey, Nandan bind doesn’t call the function right away.
It returns a new function that you can call later.
We merge the arguments provided at bind-time and call-time. bind doesn’t call the function right away. It returns a new function that you can call later. new function We merge the arguments provided at bind-time and call-time. That’s it — You just built call, apply, and bind polyfills! That’s it — You just built call, apply, and bind polyfills! Honestly, when I first read about polyfills, I thought it was some deep internal browser magic. Turns out, it’s just about creatively manipulating JavaScript’s behavior. If you take one thing from this post, let it be this: “The cowards never started and the weak died along the way. That leaves us, ladies and gentlemen. Us.” “The cowards never started and the weak died along the way. That leaves us, ladies and gentlemen. Us.” (Yeah, that’s a quote from Shoe Dog. Still fits perfectly here, doesn’t it?) Shoe Dog Here’s one if you want to read a review of the book Shoe Dog, written by me. Here’s one if you want to read a review of the book Shoe Dog, written by me. That’s all, folks! I hope you found this short note on Polyfills of Call, Apply & Bind helpful. If you enjoyed this, check out more articles on my Blog, https://blog.nandan.dev/ https://blog.nandan.dev/ Feel free to comment, email me at connect@nandan.dev, or connect with me on Twitter, Instagram, or GitHub. Don’t forget to subscribe to my newsletter for regular updates on JavaScript topics! connect@nandan.dev connect@nandan.dev Twitter | Instagram | Github | Website Twitter Twitter Instagram Instagram Github Github Website Website

Polyfill This! Flat, Map, Filter & Reduce — The Hard Way

I Vibe Coded an AI App and Got DDOS'd Instead

Read My Stories

Portfolio

Build Your Own Polyfills for Call, Apply, and Bind in JavaScript

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

6 HTML Pitfalls and Gotchas Every Developer Should Avoid

10 Ways To Effectively Sell Yourself During A Job Interview

10 JavaScript Interview Questions and Answers to Help you Land Your Next Role

10 Essential Javascript Questions

23 Common Data Science Interview Questions for Beginners

2022 Noonies Programming Nominee Roy Derks on GraphQL, React, and More

6 HTML Pitfalls and Gotchas Every Developer Should Avoid

10 Ways To Effectively Sell Yourself During A Job Interview

10 JavaScript Interview Questions and Answers to Help you Land Your Next Role

10 Essential Javascript Questions

23 Common Data Science Interview Questions for Beginners

2022 Noonies Programming Nominee Roy Derks on GraphQL, React, and More

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps