What is bind() in JavaScript?

#javascript #beginners #webdev #tutorial

I recently published an article on using Call() and Apply() in JavaScript. Bind is often discussed with these methods but it works slightly differently.

When we use the bind method we are creating a new function but the value of this is set to whatever is passed in when we call the method. Let’s start by looking at a basic example.

const studentOne = {
  name: "Abby",
  score: 80
};
function studentScore() {
  return `${this.name} scored ${this.score}.`
};
const result = studentScore.bind(studentOne);
console.log(result());
//Returns ---> Abby scored 80.

In the above example we create a studentOne object. Inside of this object we set properties for the students name and score. Next we use a function declaration and create a function called studentScore. This function returns a template literal with the students name and score. We go on to declaring a variable called result and assign to this the result of calling the studentScore function but using the bind method. We pass in the studentOne object as the parameter to bind. Lastly inside of a console log we return the result of invoking result.

When bind is called in the above example a new function is created and stored inside of the variable result. This is stored with the context for this. It is only when we invoke this later inside of the console log that this function actually runs. So to clarify, unlike with call() and apply() the bind method does not execute immediately. It simply returns a new function with the value of this set to what we pass in to the parameters.

Passing parameters to bind
We can expand upon our prior example by looking at how we can pass additional parameters to bind. If our studentScore function had a parameter, when we call bind we can pass the argument for this in at the same time. Let’s look at an example of this.

const studentOne = {
  name: "Abby",
  score: 80
};
function studentScore(subject) {
  return `${this.name} scored ${this.score} in ${subject}.`
};
const result = studentScore.bind(studentOne, "Art");
console.log(result());
//Returns ---> Abby scored 80 in Art.

We expand upon our prior example by setting subject as a parameter to the studentScore function. Now when we call bind we pass the string Art as an argument. We could equally achieve the same result by passing the Art argument when we called result as shown below.

const studentOne = {
  name: "Abby",
  score: 80
};
function studentScore(subject) {
  return `${this.name} scored ${this.score} in ${subject}.`
};
const result = studentScore.bind(studentOne);
console.log(result("Art"));
//Returns ---> Abby scored 80 in Art.

One caveat to note here is that additional arguments will be ignored.

const studentOne = {
  name: "Abby",
  score: 80
};
function studentScore(subject) {
  return `${this.name} scored ${this.score} in ${subject}.`
};
const result = studentScore.bind(studentOne, "Art");
console.log(result("Maths"));
//Returns ---> Abby scored 80 in Art.

In the above example we pass in Art as the argument when we call bind. When we call result we then pass in Maths as an argument. This does not replace Art, instead it just adds an additional argument and as the studentScore function only takes one parameter this then gets ignored. If it took two parameters however it would work.

const studentOne = {
  name: "Abby",
  score: 80
};
function studentScore(subjectOne, subjectTwo) {
  return `${this.name} scored ${this.score} in ${subjectOne} & ${subjectTwo}.`
};
const result = studentScore.bind(studentOne, "Art");
console.log(result("Maths"));
//Returns ---> Abby scored 80 in Art & Maths.

I hope you enjoyed this article. Please feel free to post any comments, questions, or feedback, and follow me for more content!