JavaScript Function bind() Method –

0 2 3 minutes read

The bind() method is a built-in method of JavaScript that allows you to create a new function with a specific this value and any number of initial arguments (if desired). Using bind() can be very useful when dealing with callbacks, event handlers, or methods on an object, where this may sometimes be lost or unintentionally altered.

Syntax:

Where,

originalFunction: The function you want to bind.
thisArg: The value you want to use for this inside the new function.
arg1, arg2, …: The arguments are to partially pre-apply to the function.

Benefits of Function bind() Method

JavaScript Function bind() Method

The working of the Function bind() method in JavaScript is as follows:

1. Creates a New Function

bind() doesn’t call the original function immediately, it returns a new function (“bound function”) where:

this is locked to thisArg
The pre-set arguments you provide in bind() will come before any additional arguments you provide when you invoke the new function.

2. Permanent Binding of Context

No matter how the bound function is invoked (as a plain function, passed as a callback, etc.), this will always refer to the object you passed to bind(). It cannot be overridden by indirect calls (e.g., using call or apply). Once a function is bound then the bind() cannot be used again to change its this value.

Example

const myModule = {<br />
  x: 42,<br />
  getX: function() {<br />
    return this.x;<br />
  }<br />
};<br />
const unboundGetX = myModule.getX;<br />
console.log(unboundGetX());<br />
const boundGetX = unboundGetX.bind(myModule);<br />
console.log(boundGetX());<br />

Execute Now

Output:

undefined
42

Here, unboundGetX() loses its original context, but boundGetX() always uses myModule as this.

3. Partial Application (Currying)

You can also use bind() to partially apply an argument to a function. However, the arguments you pass in the bind() method are always applied as the first parameters. Any other parameters you pass will follow the bound parameters.

Example

function multiply(a, b) { return a * b; }<br />
const double = multiply.bind(null, 2);<br />
console.log(double(4));<br />

Execute Now

Output:

4. Method Borrowing

The bind() allows functions to be taken from one object to another object (even if that object doesn’t have it).

Example

const person = { firstName: “John”, lastName: “Doe”, fullName: function() { return this.firstName + ” ” + this.lastName; } };<br />
const member = { firstName: “Hege”, lastName: “Nilsen” };<br />
let fullName = person.fullName.bind(member);<br />
console.log(fullName());<br />

Execute Now

Output:

Hege Nilsen

5. Event Handlers and Callbacks

Functions often lose their this context in asynchronous code or event handlers, resulting in undefined or referring to the global object (window in browsers).

Example

const person = { name: “Jack”, greet: function() { console.log(“Hello, ” + this.name); } };<br />
setTimeout(person.greet, 1000);<br />
setTimeout(person.greet.bind(person), 1000);<br />

Execute Now

Output:

Hello, undefined
Hello, Jack

Conclusion

The bind() method is a powerful, simple tool in JavaScript when it comes to controlling the context of a function, re-using methods, and supporting functional programming and related concepts such as currying and partial application. With an understanding of bind() comes readable, predictable, and shareable code in procedural JavaScript as well as object-oriented JavaScript.

Frequently Asked Questions (FAQs)

1. What is the purpose of the bind() method in JavaScript?

The bind() method is used to create a new function with a specified this value (context) and optionally, preset initial arguments. This is useful for making sure that when the function is called later, sometimes in a different context, its this value refers to the intended object.

2. How does bind() differ from call() and apply()?

bind() creates a new function with a set this value and, optionally, preset arguments, but does not execute it immediately.
call() and apply() both invoke the function immediately, using the given this context, call() with a comma-separated list of arguments, apply() with an array of arguments.

3. What is the function binding with bind()?

Function binding means permanently connecting a function with a specific context (this value) and/or preset arguments. No matter how or when you call the bound function, it is this value that stays fixed as set during binding.

4. What is the difference between using bind() and arrow functions for binding context?

bind() explicitly sets the this of the function for all future calls and returns a new function.
Arrow functions do not have their own this; instead, they capture it from their surrounding lexical context and cannot be rebound.
Use bind() when you need to explicitly control and fix a function’s context. Use arrow functions where lexical scoping is desired.

5. Can you use bind() to set this for event handler functions?

Yes, bind() is commonly used in event handlers to ensure that this refers to the intended object, instead of the event target or the global object. This prevents common bugs where this becomes undefined or points to the wrong object.

6. Does bind() change the original function?

No, bind() returns a new function and the original function remains unchanged.

Next TopicJavaScript Objects