Why we use the call function?
In this article, I am going to explain how to use call, apply, and bind in JavaScript with simple examples. We will also implement an example that showcases how you can create
your own map function with the apply function. Without further ado, let's get started. Here are some of the things you should understand to get the most out of this article: Let's look at the functions we'll be studying here a bit more closely to understand what they do. Call is a function that helps you change the context of the
invoking function. In layperson's terms, it helps you replace the value of Apply is very similar to the Bind is a function that helps you create another function that you can execute later with the new context of Now we will look at some basic examples of the
call, apply, and bind functions. Then we will look at an example were we will be constructing our own function similar to the map function. Here is the syntax of the Where, Note that if you invoke a function without any Now that we have some context around what the Consider the below example. It consists of 3 classes –
If you look carefully, you can see that we use the In both of these functions, we invoke the How to call a function with no arguments in JSConsider the below example:
In this example, we invoked the function How to Use the Apply Function in JavaScriptThe In Here is the syntax for the
Where,
As you can see above, the The first syntax is a simple one. You can pass in an array of arguments like below:
The second syntax is where we can pass in the new array object to it:
The third syntax is where we can pass in the arguments keyword:
arguments is a special object available inside a function. It contains values of the arguments that are passed to a function. You can use this keyword with the The best part about Let’s look at the same example as above, but this time we'll use the
And here is an example that showcases how you'd use the
How to Use the Bind Function in JavaScriptThe Here is the syntax
for the
Where,
The
Now this function Let's look at a classic example of how to use a
Consider the above App component. It constitutes the following things:
If we click on the Have you ever wondered why this issue occurs? 🤔🤔 You might be expecting that we should be able to access the state of the class since
We can fix this by providing the right context of
The How to Create Your Own map FunctionNow that we have all the necessary things, let's start off by creating our Here is the syntax of the
Where,
The basic functionality of a It is a function that walks through each element of an array and applies the function that is passed as an argument. The return type of a map is again an array with Now we understand the requirements, so we can move on to create our own
Let's understand the above function bit-by-bit:
Now let's take a look at how we are going to execute our NOTE: do not follow the below approach in your production code. This can cause damage to the existing code.
Once this is done, we are good to go with executing our new map function on an array.
SummaryThis article showed you what the call, apply, and bind functions can do via examples. So to talk about these functions in brief:
Thank you for reading! Follow me on Twitter, GitHub, and LinkedIn. Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started Why function call is used?A function call performs an invocation of a user-defined function, a special kind of a subroutine which is implemented in a separate programming object of type function. Usually, a function call is provided with parameters and returns a result. It may be used within a Natural statement instead of a read-only operand.
What is meant by call function?A function call is an expression that passes control and arguments (if any) to a function and has the form: expression (expression-listopt) where expression is a function name or evaluates to a function address and expression-list is a list of expressions (separated by commas).
What happens when we call function?So calling a function creates a scope of its own, takes all the information related to the function (definition, passed variables, other variables etc), puts it in a stack frame and then stacks the stack frame.
|