JavaScript Function bind() Method

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

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.

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.

Output:

8

4. Method Borrowing

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

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).

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.