Helder
Published on

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 the 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 a 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)
}
console.log(cook()) // => undefined

Open browser consoleConsole

In the case that we run above we get the undefined value because this didn't receive a ingredients property.

Understanding the right context

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

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

let dinner = {
  ingredients: 'bacon',
}
let cookBoundToDinner = cook.bind(dinner)
console.log(cookBoundToDinner()) // => "bacon"

Open browser consoleConsole

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',
}
console.log(lunch.cookLunch()) // => "salad"

Open browser consoleConsole

In the previous two examples we are using the cook method both in thelunch 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
  },
}
const 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

Open browser consoleConsole

In this example we used or Higher Order Functions where functions are passed as parameters for the 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 this 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. 💫