en-US.mdx

title
Explain `Function.prototype.bind`

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

Source: Function.prototype.bind() - JavaScript | MDN

bind() is most useful for binding the value of this in methods of classes that you want to pass into other functions. This was frequently done in React class component methods which were not defined using arrow functions.

const john = {
  age: 42,
  getAge: function () {
    return this.age;
  },
};

console.log(john.getAge()); // 42

const unboundGetAge = john.getAge;
console.log(unboundGetAge()); // undefined

const boundGetAge = john.getAge.bind(john);
console.log(boundGetAge()); // 42

const mary = { age: 21 };
const boundGetAgeMary = john.getAge.bind(mary);
console.log(boundGetAgeMary()); // 21

In the example above, when the getAge method is called without a calling object (as unboundGetAge), the value is undefined because the value of this within getAge() becomes the global object. boundGetAge() has its this bound to john, hence it is able to obtain the age of john.

We can even use getAge on another object which is not john! boundGetAgeMary returns the age of mary.

Practice

Try implementing your own Function.prototype.bind() method on Great Front End.

References

• Function.prototype.bind() - JavaScript | MDN