# 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:

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

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

`let elem = document.querySelector('#elem');`

Suppose we also have the following function `func`:

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

`let 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'`):

`newFunc('1', '2');`

Let's get it all together:

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

`func = func.bind(elem);`

Let the following code be given:

`<input id="elem" value="привет">` `let 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'`

Write a construction with the method `bind` in the indicated place so that `this` inside the `func` function always points to the input from the `elem` variable

← →
↑
en ru