Binding a context via the bind method in JavaScript

The following bind method allows you to permanently bind a context to a function. As a result, this method returns a new function, inside which this will have a hard-coded value.

Let's look at an example.

Let us have an input:

html<input id="elem" value="text">

Let the reference to this input be written into the variable elem:

javascriptlet elem = document.querySelector('#elem');

Suppose we also have the following function func:

javascriptfunction func(param1, param2) {
  console.log(this.value + param1 + param2);
}

Let's make a new function using bind, which will be a copy of the function func, but this in it will always be equal to elem:

javascriptlet newFunc = func.bind(elem);

Now the variable newFunc contains a function. Let's call it by passing '1' in the first parameter, and '2' in the second (remember that elem contains an input with a value equal to 'text'):

javascriptnewFunc('1', '2');

Let's get it all together:

javascriptlet elem = document.getElementById('elem');

function func(param1, param2) {
  console.log(this.value + param1 + param2);
}

let newFunc = func.bind(elem);
newFunc('1', '2'); // shows 'text12'

It is not necessary to write the result of bind into a new function newFunc, you can simply overwrite func. After that, func will be the same function as it was, but with a hard-coded this:

javascriptfunc = func.bind(elem);

html<input id="elem" value="hello">

javascriptlet elem = document.getElementById('elem');

function func(name, surname) {
  console.log(this.value + ', ' + name + ' ' + surname);
}

// Let's write a construct with bind() here

func('John', 'Smit'); // should output here 'hello, John Smit'
func('Eric', 'Luis'); // should output here 'hello, Eric Luis'