Harnessing the Power of Function.prototype.bind()

Pass an object method to a timer or event listener, and it may no longer run with the object as this. Function.prototype.bind() gives us a new function that keeps the chosen this value for ordinary calls, even when another part of the application calls it later.

Introducing Function.prototype.bind()

Function.prototype.bind() creates a new function with a preset this value and, optionally, some initial arguments. It does not change the original function or replace the lexical this captured by an arrow function.

Syntax

const boundFunction = originalFunction.bind(thisArg, arg1, arg2, ...)

• originalFunction: The original function you want to bind.
• thisArg: The value to be set as this when the bound function is called.
• arg1, arg2, ...: Arguments to be pre‑filled in the bound function.

A Basic Example

So, let's consider a situation where we have an object method that we need to pass around our code as a callback. However, you want to retain the object's context:

const person = {
  name: 'Maddie',
  greet() {
    console.log(`Hello, I am ${this.name}`);
  },
};

setTimeout(person.greet.bind(person), 1000);

Admittedly (and as is often the case with very basic examples), this isn't very good in isolation, but bear with me for a minute whilst I explain.

Here, we use bind() to create a new function from person.greet with this set to person. As you'll probably be aware, when we pass object methods as callbacks (in this case, to setTimeout), the method often loses its original context (this). By using bind() we ensure that the greet method retains the correct context when used as a callback.

Real‑World Scenarios

Event Handling in UI Components

One of the places I'll often see developers stumble when new to the language, especially when they start with React, is dealing with context in class‑based UI components. Here, you need to ensure that your event handlers have the correct this context, which is achieved like this:

class ComponentName extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.log('Button clicked');
  }

  render() {
    return <button onClick={this.handleClick}>Click me</button>;
  }
}

In this example, bind() is used in the constructor to ensure that handleClick always has this referring to the component instance.

A Note About Arrow Functions

Expanding on the example above, it's important to bear in mind that in more modern React development, this need for context‑binding as I've shown you above becomes less of a concern as developers inevitably move more towards arrow functions within their event handlers. Arrow functions automatically capture the this value of the enclosing context, which in the case of a React class component, is the component instance itself.

So the same can be achieved like this:

class ComponentName extends React.Component {
  handleClick = () => {
    console.log('Button clicked');
  };

  render() {
    return <button onClick={this.handleClick}>Click me</button>;
  }
}

Here, handleClick is defined as an arrow function instead, inheriting this from the surrounding scope, which in this case is the instance of ComponentName.

Partial Function Application

Outside of class‑based React development, bind() can also be used for partial application of function arguments. Let me show you what I mean:

function add(a, b) {
  return a + b;
}

const addFive = add.bind(null, 5);
console.log(addFive(10));  //=> 15

Here, we create a new function called addFive which calls a binding to add. The first argument of add is then permanently set to 5, meaning when addFive is called with the value of 10, the actual call is add(5, 10), resulting in an output of 15.

Again, this is a fairly basic example, but you can hopefully see how you could use this approach to call functionality, with part of it already specified and bound.

Benefits of Using bind()

• Explicit Context

  : bind() allows explicit setting of this in callbacks and event handlers, which is particularly crucial when working in class‑based components or when the function context is not automatically bound.

• Reusability

  : Creates reusable functions with preset arguments, increasing code modularity.

• Flexibility

  : Offers a flexible way to write maintainable and less error‑prone code, especially in event handling and asynchronous programming.

Wrapping Up

The class‑based React examples show an older component style, but Function.prototype.bind() remains a valid JavaScript method. Use it when a callback needs a fixed this value or preset arguments. The useful question is how the function will be called, rather than how old the method is.