Javascript — How to use Call, Apply, and Bind methods
In this article, we will see what call, apply and bind methods in javascript, and why they exist.
Before jumping into it, we need to know what is this
keyword in javascript, I have already posted an article explaining it.
In Javascript, all the functions will have access to a special keyword called this
, the value of this
will point to the object on which that function is executed.
What are these call, apply, bind methods?
To put it in a simple way — all these methods are used to change the value ofthis
inside a function.
Let’s understand each method in detail,
Call()
Using the call
method, we can invoke a function, by passing a value that will be treated as this
inside it.
in the above example, we are invokingcall
method on the printName
function by passing newObj
as a parameter, so now this
inside printName
points to newObj
, hence this.myName
prints peter
.
How to pass arguments to functions?
1st argument of the call
method is the value which this
inside the function points to,
to pass additional arguments to that function, we can start passing it from the 2nd argument of the call
method.
function foo(param1, param2) {}foo.call(thisObj, arg1, arg2);
where,
foo
is the function that we are invoking by passing newthis
value which isthisObj
arg1
,arg2
, are the additional arguments that thefoo
function will take (param1
=arg1
,param2
=arg2
)
apply()
The apply
function is very similar to the call
function. The only difference between call
and apply
is the difference in how arguments are passed.
call
— we pass arguments as individual values, starting from 2nd argumentapply
— in the case ofapply
, the additional arguments will be passed as an array.
in the above example, both call
and apply
method on function sayHello
is doing the same thing, the only difference is how we are passing additional arguments.
bind()
Unlike call
and apply
method, bind
will not invoke the function directly, instead, it changes this
value inside the function and returns the changed function instance.
We can invoke the returned function later point
passing additional arguments:
passing additional arguments in bind
works similar to the call
method, we can pass additional arguments as individual values starting from the 2nd argument of the bind
method.
In the case of the bind
method, we can pass additional arguments in two ways,
- While calling the
bind
method itself, we can pass additional arguments along with the value ofthis
to that function. - Another way is that we can pass additional arguments while invoking the function of that
bind
method returns.
we can follow any one of the above ways and it works similarly without any difference in functionality.
NOTE: if we don’t pass any value/passing null while calling
call
,apply
,bind
methods means, thenthis
inside calling function will points to theglobal
object.
NOTE:
we cannot use call
, apply
, and bind
, methods on Arrow
functions to change the value of this
, because arrow
functions don’t have their own this
context,this
inside arrow function will point to the outer/parent function in which it is present.
So applying these methods on the arrow
function will not make any effect.
I hope this article helps you to understand what call(), apply(), and bind() methods in javascript. You can read more about it from here.
Follow me on Linkedin and Medium for more technical content.
Go composable: Build apps faster like Lego
Bit is an open-source tool for building apps in a modular and collaborative way. Go composable to ship faster, more consistently, and easily scale.
Build apps, pages, user-experiences and UIs as standalone components. Use them to compose new apps and experiences faster. Bring any framework and tool into your workflow. Share, reuse, and collaborate to build together.
Help your team with: