Exploring the bind method in JavaScript
Tags: javascript, programming, webdev
Published: 2020-01-22 22:37:08

---
title: Exploring the bind method in JavaScript
published: true
description: Knowing the bind method and its benefits in JavaScript.
tags: JavaScript, Programming, Webdev
cover_image: https://i.imgur.com/86DGMav.png
canonical_url: https://helderburato.com/exploring-the-bind-method-in-javascript/
---

<center>Originally posted on [helderburato](https://helderburato.com/exploring-the-bind-method-in-javascript/)</center>

---

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:

```js
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:

```js
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:

```js
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:

```js
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. 💫