The beauty of apply, call and bind method in javascript

If I talk about the beauty of apply, call and bind method then really those methods are very powerful and useful in javascript. But before it comes on the topic we need to understand function, scope, this, context.

In javascript we have two method to create function or method.


// function by declaration.
function msg () {}

// function by expression.
var msg = function () {};

But the interesting things is we have 3 way to invoke or call to function –


// Normal invoke
function msg () {}
msg()

// Self invoke
(function msg() {}());
msg.call();

// apply, call, bind
msg.apply();
msg.call();
msg.bind()();

Now comes to point using call, apply and bind method, we can call any function or method and apart from that we can manipulate the context of that function. Now the question arises on our mind what is context. So basically context is just a current this.

Let’s take an example to understand this –


function msg() { return this; }
msg(); // return window object

var student = { name: "xyz" };
msg.call(student); // return student obj

Here apply and call methods are the same but the basic difference is apply method requires an array as the second parameter but in call parameters require separately.

The first parameter is the value of this provide for the invoke to function(msg).
Let’s take an example –


var math = {
    setNo: function (a, b) {
         this.a = a;
         this.b = b;
     }
     add: function () {
         return this.a + this.b;
     }
};

function sum (){
    return this.a + this.b;
}

math.setNo(2, 3);
math.add(); // 5
sum.call(math); // 5
sum.apply(math); // 5
sum.bind(math)(); // 5

Here sum is different but it’s using math object value;
If you don’t need to manipulate context then you just pass null value;


function add (a, b) { return a + b; }
add.apply(null, [2, 3]); // 2, 3 in array
add.call(null, 2, 3); // 2, 3 are separate parameters

Here the first parameter required otherwise you value taken as this or context.
But bind case little different here first set this then it returns this set function after that call or invoke.


var sum = add.bind(null, 2, 3);
sum(); // 5

Basic use case example –

Find max and min


Math.min.apply(null, [6, 5, 4]); // 4
Math.max.apply(null, [6, 5, 4]); // 6
Math.max.call(null, 6, 5, 4); // 6
Math.min.bind(null, 5, 7, 8); // 5

Flat push in arrays


var arr = [2, 3, 4];
array.push.apply(arr, [ 1, 2]); // 2, 3, 4, 1,  2

Losing this


var stu = {
    name: "xyz",
    getName: function () { alert("My name is " + this.name); }
};

// In normal case
setTimeout(stu.getName, 100); // My name is

// Using bind
setTimeout(stu.getName.bind(stu), 100); // My name is xyz

Here, In normal case we loose current this because as you know in browser api window object is our current this so in that kind of situation bind or apply, call method can be useful.

You May Also Like

About the Author: Pankaj Bisht