Exploring the bind method in JavaScript

In this article, we will cover the “bind” functionality that makes up the JavaScript language.

Introduction

The main purpose of the bind method is to change this context of a function independent of where it is being called.

It’s very common the transformation of this occurs as new method calls are made and that a certain value is expected for our this context however we are faced with this many times unexpected or undefined.

The this context

One of the most common errors, when we aren’t aware of the bind method, is the attempt to execute methods with initially invalid contexts. Check out the following example:

function cook() {
  console.log(this.ingredients);
}
cook(); // => undefined

In the case that we run above, we get the undefined value because this didn’t receive an ingredients property.

Understanding the right context

As we saw in the previous example the function expected this context with the ingredients property but didn’t receive the undefined or invalid context so we will get an invalid result against the cooking method. Check below the right way:

function cook() {
  console.log(this.ingredients);
}

let dinner = {
  ingredients: "bacon"
};
let cookBoundToDinner = cook.bind(dinner);
cookBoundToDinner(); // => "bacon"

You may notice in the previous example that we created the dinner object where we are setting the ingredients: bacon property and then we call the cook function using the bind method with the dinner parameter that will be it's new context this.

Knowing other ways without using bind

Now that we know how to work with the bind method let’s do the previous, but without bind method. Check below:

let cook = function() {
  console.log(this.ingredients);
};

let dinner = {
  cookDinner: cook,
  ingredients: "bacon"
};
dinner.cookDinner(); // => "bacon"

let lunch = {
  cookLunch: cook,
  ingredients: "salad"
};
lunch.cookLunch(); // => "salad"

In the previous two examples, we are using the cook method both in the lunch object and in the dinner object. Since the function is in the same context it will use the available property that fits your need which in the case is ingredients in which you returned when executing the function.

Assigning methods in this context

You aren’t limited to only assigning values to your properties, you can also use methods like properties. Check below:

let calc = function() {
  return {
    sum: this.sum,
    mult: this.mult,
    div: this.div
  };
};

let methods = {
  sum: function(x, y) {
    return x + y;
  },
  mult: function(x, y) {
    return x * y;
  },
  div: function(x, y) {
    return x / y;
  }
};
calcBound = calc.bind(methods);

console.log(calcBound().sum(2, 2)); // => 4
console.log(calcBound().mult(2, 3)); // => 6
console.log(calcBound().div(6, 3)); // => 2

In this example we used or Higher-Order Functions where functions are passed as parameters for this context, these being the sum, mult and div methods.

Conclusion

With the above examples, we can see how the bind method facilitates the execution of tasks when working with these contexts in different methods.

Do you know of other ways that the bind method can be applied? Leave your contributions in the comments and help us make our day to day easier.

If you have enjoyed it, share it with your friends and colleagues and leave us suggestions for the next posts. 💫