Lets understand Call(), Apply(), Bind() in JavaScript

Lets understand Call(), Apply(), Bind() in JavaScript
In your daily life of programming, you must have gone through call(), apply() and bind() methods while dealing with functions.
Call() & Apply() method:
Lets understand one by one.
Before moving on call methods, you are supposed to know that everything is an Object in JavaScript. That means, function too, and Object contain some predefined methods which can be called on the object itself to get the desired result. So, now we can consider function as an Object and function can contain methods.
var x = 3;
var y = 4;
function sum(a,b) {
console.log(a + b + x + y)
}
sum(1,2); //output: 10
Here, in the above example, sum function takes two arguments and then it logs the sum of two number along with x and y. Since the sum function does not have its own x and y variables, it consider them from the outer global context.
Every inner level function can access its outer level and global level properties.
ar x = 3;
var y = 4;
function sum(a,b) {
console.log(a + b + this.x + this.y)
}
sum(1,2); //output: 10
This above function is equivalent to the above function, the merely difference is that we have “this” keyword pointing over x and y which are defined at global context.
Now, if you are familiar with “this” keyword in JavaScript, you must be knowing that
In the Global Context(outside of any function), The value of “this” keyword refers to the Global Object or Window Object.
console.log(this);
console.log(window);
window == this // true
In the Function Context, “this” can refers differently depending upon how the function is called. That means a function call decides how this will refer inside the function. By default, in any function, “this” refers to the global object (in strict mode).
function Test() {
var a = 6;
console.log(this)//Global/Window
console.log(this.a) //undefined
}
                        
In the above function, the value of “this” keyword refers to the global context and “this.a “shows undefined because outside of Test function, there is no variable defined and initialized with “a” identifier.
But this is not the case with Object with literals, check the below one.
var Obj = {
name: "Rohit",
 getName: function() {
 console.log(this.name)
  }
}
Obj.getName() //Rohit
Obj.getName() outputs “Rohit” because, this method is called with reference to its own object that is “Obj” which has name property. Now how can we do same with function defined with the function constructor.
In the below example, we are trying to call the sum function in a such a way that the used “this” keyword inside the sum function will point to the properties of “newObj” but not the outer declared x and y variables.
var x = 3;
var y = 4;
var newObj = {
 x: 5,
 y: 6
}
function sum(a,b) {
console.log(a + b + this.x + this.y)
}
sum.call(newObj, 1,2); //output: 14
above function can be considered something like ….
var newObj = {
 x: 5,
 y: 6
}
function sum(a,b) {
console.log(a + b + newObj.x + newObj.y)
}
sum.call(newObj, 1,2); //output: 14
we are instructing the sum() method to use the property x and y which is already in the newObj object.
so simple right….
Now we can understand the below definition about call()
call() provides a new value of this to the function/method. With call, you can write a method once and then inherit it in another object, without having to rewrite the method for the new object. ….. from official documentation by MDN
Then What is apply() method
apply() method is similar to call() method, the only difference is how we are convenient about passing the argument to the function based on our need.
To pass argument individually then we can use call() method
but
if you want to pass argument as an array then surely prefer apply() method
demonstration use of apply() with the above previous example.
var newObj = {
 x: 5,
 y: 6
}
function sum(a,b) {
console.log(a + b + this.x + this.y)
}
sum.apply(newObj, [1,2]); //output: 14
Check the method called over sum(). we have replaced call() with apply()
Where can we use Bind() method
Lets consider the above example again.
But this time, we have a different scenario. We are already aware about some of the arguments we are about to pass to the sum() function and don’t know to pass it every time when calling the same function again and again.
Suppose, We are sure about two argument at-least and want to tie those with sum method to avoid calling it over next time. we can achieve this too.
var dataObj = {
 x: 5,
 y: 6
}
function sum(a, b) {
console.log(a + b + this.x + this.y)
}
var newSum = sum.bind(dataObj, 1);
newSum(2) // output is 14
Great. we did it. Now we don’t have to take care of first two known arguments. The result of newSum() would only differ with the last argument which is not fixed with the sum function.
What we can understand with the above example is :
using bind() on any function will create a new function where the “this” reference of original function will be tightly bound with the passed object arguments and will not be changed with the newly function call.

Thanks for reading this article. I hope you have enjoyed this.

People Reaction : 0

Rohit Sharma
Name : Email : Website :
© 2020 WriteSomeCode. All Right Reserved. A Rohit Sharma Blog. Creative Commons License licensed under a Creative Commons Attribution 4.0 International License