As JavaScript developers, most of the time we are pretty confused about the Call, bind, apply and their use in JavaScript.

So let's try to understand.

1. CALL & APPLY

Both these methods are simply known as Immediately Invoked Function. What basically it means, whenever you defined both these methods on a function it execute immediately as we run the program.

Technically, if we define CALL & APPLY, both are used to execute a function in a different this context.

Where this is passed as first argument & the second or subsequent argument (for Call) are treated as arguments

Only difference b/w them is that CALL takes argument as comma separated while apply takes argument as an array with this as first argument.

So syntax wise, we can simply write them as follows -

f.call(<this-context>, a1, a2, a3, ...)
f.apply(<this-context>, [a1, a2, a3, ...])

Where f is a function to be called in respect of a different this context, where in the above case it is showed as

Now lets consider a simple example -

var a = 2
function b() {
    return this.a;
}

b() // 1. output 2

b.call() // 2.   output 2

b.apply() //3.   output 2

So as you have seen from the above code that all the calls produce the same result. The reason is that by default if you are simply calling call & apply, then the default this context will be used. In this case the default this context is Window object.

So now let's make a little change to the code

const obj = {
 a: 5
}

b.call(obj) //  output5

b.apply(obj) //  output5

Now let's further revise the example to see how argument can be used with call & apply

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

const obj = {
 a: 5
}

b.call(obj, 6) //  output 11

b.apply(obj, [6]) //  output 11

So as you have seen nothing changed in the final output, just was syntax change. So this is basically only difference b/w call & apply in terms how they passed arguments to the calling function.

2. bind

So at high level speaking it is also used to attach the different this context to the calling function but it defer the calling & make sure whenever that function is called will be execute in the given binded this context.

function b(b) {
   return this.a + b;
}
var obj = {
 a: 5
}

var c = b.bind(obj, 6)
c(); //  output 11

OR

var c = b.bind(obj)
c(6); //  output 11

So, this is the way how the function can behave differently when using call, apply & bind.

Thanks,

Happy Coding