How to use the apply(💅), call(📞), and bind(➰) methods in JavaScript
In this article, we’ll talk about the apply, call, and bind methods of the function prototype chain. They are some of the most important and often-used concepts in JavaScript and are very closely related to the this keyword.
So, to get a grasp of the information in this article, first you have to be familiar with the concept and use of the this keyword. If you are already familiar with it then you can proceed — else, you can refer this article here and then come back here.
To learn about apply|call|bind we need to know about functions in JavaScript too, assuming you are familiar with this.
Functions
The Function constructor creates a new Function object. Calling the constructor directly can create functions dynamically, which can be executed in the global scope.
As functions are objects in JavaScript, their invocation is controlled by the apply, call, and bind methods.
To check if a function is a Function object, we can use the code in the following snippet, which returns true.
The global Function object has no methods or properties of its own. However, since it is a function itself, it does inherit some methods and properties through the prototype chain from Function.prototype. — MDN
The following are the methods in the function prototype chain:
- Function.prototype.apply()
- Function.prototype.bind()
- Function.prototype.call()
- Function.prototype.isGenerator()
- Function.prototype.toSource()
- Object.prototype.toSource
- Function.prototype.toString()
- Object.prototype.toString
We are concerned with the first three, so let’s begin.
Apply 💅
The apply() method is an important method of the function prototype and is used to call other functions with a provided this keyword value and arguments provided in the form of array or an array like object.
Array-like objects may refer to NodeList or the arguments object inside a function.
This means that we can call any function and explicitly specify what this should reference in the calling function.
Syntax
Return
It returns the result of the function which is invoked by this.
Description
The apply method is used for allowing a function/object belonging to an object x to be called and assigned to an object y.
Examples
1.
As seen in the given snippet, we see that when we push an array inside another, the whole array is treated as one element and pushed inside the array variable.
But what if we want the elements to be pushed individually instead as an array? Sure there are literally n number of ways to do so, but as we are learning apply, let’s use it:
In the given example we can see the use of apply in joining two given arrays. The arguments array is the elements array and the this argument points to the array variable. The elements of the elements array are pushed to the Object(array) to which the this is pointing. We get the result as the second array’s individual elements pushed to the array to which the this is pointed.
2.
The max function in JS is used to find the element with the maximum value from a given pool of elements. But as we can see from the snippet, if the values are in the form of an array, we get the result as NaN. Surely we are talking about JavaScript so again, there are n number of ways doing this, but let’s use apply.
Now when we use apply and use the Math.max() function, we get the result. As we know, the apply will take all the values inside the array as individual arguments and then the max function will be applied to them. This will give us the maximum value in the array.
An interesting thing to point out here is that in place of this we have used null. As the argument provided is the number array, even if this is introduced it will point to the same array and we will get the same result. Therefore, in such cases, we can use null in place of this. This shows us that the this argument in the apply function is an optional argument.
Call
The call() method is used to call a function with a given this and arguments provided to it individually.
This means that we can call any function, explicitly specifying the reference that this should reference in the calling function.
This is very similar to apply, the only difference being that apply takes arguments in the form of an array or array-like objects, and here the arguments are provided individually.
Syntax
Return
The result of calling the function with the specified this value and arguments.
Description
The call method is used for allowing a function/object belonging to an object x to be called and assigned to an object y.
Examples
1.
This is an example of constructor chaining. As we can see, in every function the constructor of the Product is called, and using call the properties of the Product object are chained with the Pizza and Toy objects, respectively.
When new instances are created of the Pizza and Toy objects, parameters are provided as name, price and category. Category is applied in the definition only, but the name and price are applied using the chained constructor of the Product object, as they are defined and applied in the Product object. With a little more tweaking we can achieve inheritance.
2.
In the snippet above, we defined a function called sleep. It consists of an array reply which consists of elements which address properties using the this keyword. They are defined in a separate object outside the function.
The function sleep is called with the object obj as an argument. As we can see, the properties of the obj are set in the this.animal and this.sleepDuration, respectively, and we get the full sentence as output.
Bind➰
The bind() method creates a new function that, when called, has its
thiskeyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called. — MDN
Syntax
Return
Bind returns a copy of the function with the supplied this and the arguments.
Description
The bind function is much like the call function, with the main difference being that bind returns a new function whereas call does not.
According to ECMAScript 5 specifications, the function returned by bind is a special type of exotic function object (as they call it) called the Bound function (BF). The BF wraps the original function object. Calling a BF runs the wrapped function in it.
Examples
1.
In the above snippet, we have defined a variable x and an object called module. It also contains a property called x and another property whose corresponding value is a function which returns the value of x.
When the function getX is called it returns the values of x which is defined inside the object and not the x in the global scope.
Another variable is declared in the global scope which calls the getX function from the module object. But as the variable is in the global scope, the this in the getX points to the global x and hence 9 is returned.
Another variable is defined which calls the previous function but this time binds the said function with the module object. This binding returns the value of x inside the object. Due to the binding, the this in the function points to the value of x in the object and not the global x. Hence we get 81 as the output
Conclusion
Now that we have learned the basics about the methods, you might still be a little bit confused about why there are 3 different functions doing almost the same thing. To clarify this concept, you have to practice with different situations and scenarios so you can learn more thoroughly where and how they can be used. They will for sure make your code cleaner and more powerful.
If you liked this article, please clap👏 and follow👣 for more.
