Introduction on JavaScript Apply, Call, and Bind Methods

[robertjohnson1]

Being the most popular programming language, JavaScript can be executed on any browser, desktop, or mobile device. The concept of functional programming revolves around the methods following certain rules. These JavaScript methods are usually properties that contain function definition and are performed on the objects. Powerful methods like apply, call and bind are used under the JavaScript when there is need to pass the function as a variant.

Use of bind() Method in JavaScript

The bind() method is a challenging concept when there is a need to deal with events. When started with the JavaScript, function binding is the practice to keep the context of this keyword within another function. The bind() method creates a function similar to the original one where the first argument determines the value of this keyword. This technique is usually required in some methods which are called from the receiver object.

• The bind() method allows the user to set this value on methods.

• The bind () method makes it easier to borrow a method either by Apply or by Call method.

• The bind() method is used as a currying function.

Use of Call() & Apply() Method in JavaScript

Both the methods serve the same purpose as they allow the object to use another object’s method. They invoke the function immediately where bind() method returns the bound function. The only difference in these JS methods is that apply() function runs the function within the array of parameters whereas the call() method requires a list of arguments which is quite similar to the standard function invocation. This means that both the methods can be called on by the functions.

• Just like bind() method, this value can be invoked using the call and apply function.

• Call and Apply methods can also borrow the functions just like bind() but in a more versatile manner.

• Apply() method is useful in creating variadic functions which means a single function can accept a number of arguments rather than fixed value.

Although, Call, apply and bind methods are quite complex to understand but they can become easier when practiced well. If you desire to become a perfect JavaScript coder with solid concepts,practice complex programming codes on any online platform like CodeFights.

The author of this article is a programming enthusiast who basically writes useful content information for JavaScript programmers. Keep watching this space and remain updated with all latest JavaScript approaches.

[gits]

to make a bit more clear what the article handles i am trying to give an example. Usually we need this when handling objects that are created to handle specific things in an application (encapsulation, separation of concern, a design pattern or whatever it is that makes us building objects). since JavaScript allows us to pass functions as parameters to other functions, we usually refer to that as callbacks, we may have an issue with scoping the functions correctly. The mentioned methods in the article help to set the scope correctly. So lets go ahead and create the problem first:

function OBJ_X() {
    this.foo = 'bar';
}
 
OBJ_X.prototype.method_x = function(param) {
    console.log(this.foo + ' ' + param);
}
 
function OBJ_Y() {
}
 
OBJ_Y.prototype.method_y = function(cb) {
    cb('whatever_param');
}
 
var ox = new OBJ_X;
var oy = new OBJ_Y;
 
oy.method_y(ox.method_x);

What did we do? We did define a very simple class OBJ_X that has a instance variable foo with the value 'bar'. when we call the method_x and a param on an instance of this class we expect something like:

'bar whatever_param'

in the console.

Now we have another simple class OBJ_Y and its method_y expects a parameter - a callback (it could be for example the handler of an async operation or such where we want to invoke the method_x on the instance of OBJ_X with a response or such - i simply pass on a string to the callback as it shows the principle). So simply put - we create an instance of each class and then invoke method_y with method_x as parameter and call method_x from there with a parameter itself - and we get the following output in the console:

'undefined whatever_param'

The actual output is not what we expect - because doing it like this we lose the intended execution context (scope) for method_x - instead the context will now be the main window scope - thus in method_x the reference to this.foo gives us an undefined value. To fix that we can use the 3 methods mentioned above.

(a) using the bind method:

function OBJ_X() {
    this.foo = 'bar';
}
 
OBJ_X.prototype.method_x = function(param) {
    console.log(this.foo + ' ' + param);
}
 
function OBJ_Y() {
}
 
OBJ_Y.prototype.method_y = function(cb) {
    cb('whatever_param');
}
 
var ox = new OBJ_X;
var oy = new OBJ_Y;
 
oy.method_y(ox.method_x.bind(ox));

(b) using the call method:

function OBJ_X() {
    this.foo = 'bar';
}
 
OBJ_X.prototype.method_x = function(param) {
    console.log(this.foo + ' ' + param);
}
 
function OBJ_Y() {
}
 
OBJ_Y.prototype.method_y = function(ctx, cb) {
    cb.call(ctx, 'whatever_param');
}
 
var ox = new OBJ_X;
var oy = new OBJ_Y;
 
oy.method_y(ox, ox.method_x);

(c) using the apply method:

this just replaces line 13 in the above example (b) with:

cb.apply(ctx, ['whatever_param']);

i hope the problem got a bit more clear with the example and how you can use the methods that are mentioned in the article.

[robertjohnson1]

Hi Gits,

Thank you for your addition.

The examples are really helpful...

Moving forward, I'll keep on adding the coding examples to make the concepts more clear.