This content originally appeared on Bits and Pieces - Medium and was authored by Makesh Kumar
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 of this 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 new this value which is thisObj
- arg1, arg2, are the additional arguments that the foo 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 argument
- apply — in the case of apply, 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 of this 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, then this inside calling function will points to the global 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:
Learn more
- How We Build Micro Frontends
- How we Build a Component Design System
- The Bit Blog
- 5 Ways to Build a React Monorepo
- How to Create a Composable React App with Bit
JavaScript: How to Use Call, Apply, and Bind was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Makesh Kumar
Makesh Kumar | Sciencx (2022-09-27T08:20:48+00:00) JavaScript: How to Use Call, Apply, and Bind. Retrieved from https://www.scien.cx/2022/09/27/javascript-how-to-use-call-apply-and-bind/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.