JavaScript bind () vs apply () and call ()

JAVA SCRIPT BASICS

Java script bind() versus apply() and call()

(00:00)

Hello guys welcome to our series Java script, in our last segment we saw about function object and about call method, in this segment we are going to continue Java script’s functions and object available of that functions and we are also going to see methods available of function object. Today we will also see apply and bind method.

So basically apply method is used for what? If you remember our last segment then you must know when we pass some parameters through call method that time we can pass as may parameters as we want. But this is the difference in apply method and call method, when we use apply method that time we cannot pass multiple parameters, we take those parameters in a array and then we pass that array.

Here you can see in syntax also function.apply after that this.arg means we have to pass our keyword this and all our parameters which are converted in array is also passed. So there is no major difference between call method and apply method. But when we have input available in form of array then we directly pass that array, we don’t need to pass individual parameters from array.

Like here an example is given, here we have some numbers available and from that numbers we have to return the highest number. For that we have inbuilt method available of name math.max of math class. This maximum method of math will return us what? It will return the maximum number from our array. So here what have we done? We have taken a array and in that we have given some values and we have generated a variable named max, we can also call it object so we have generated an object in which we have performed this operation math.max in that the max is different from variable max, variable max is user defined object whereas the second max is max from math method.

So here our math method’s max have been applied on the array and we are passing that, whatever will be the maximum value from that will be stored in our max object in our variable. Let’s say I generate a program for this, here we already have our syntax ready in that we will take function call and we will name it example apply 1 and we will remove this portion we don’t need it, we are writing 1 because this is first example of apply, so here we have generated a program for maximum number, let’s say var and let’s generate array and we will name it arr and in that we will take some values like 8, 6, 4, 3 so here you can see 8 is maximum number so shift and we will take 8 in between somewhere , okay so variable we have taken array and in that we have given some number values.

We will take another variable named max and here we wil run math.max.apply means our method , in apply we have to add null but I am intentionally not writing null here and directly I am writing array, let’s see what output do we get? Document.writeln max okay, I have to add null here but I am not adding. So you can see as I have not added null so the output is infinity in negative now I will add null here save and reload, so I am getting 8 as output.

Now question may arise why bit was mandatory to add null? Reason behind that is, as you can see in slide in syntax we have to pass this argument, if we compare this example of apply with example of call here the you can see we have created a function of name Emp and another function named Permanent Emp, here we are calling Emp through Permanent Emp, in order to call the context of Emp it is necessary to add this keyword, now let’s come back to our apply method here we have not created any function, we have used the in-built function math.max here.

(05:18)

So in order to use math.max function we don’t need this keyword but according to syntax it is necessary to add this keyword so instead of this we have to add null because we don’t have this context here. Let’s say if I add this and run this program and still I am getting 8, there is no problem in output, I can add either this or null, but if I would have used apply by method of call and I have created user defined function like Emp and if I would have created another function permanent Emp in that case I will have to use this only I cannot use null.

But currently we are using in-built function method math.max so I can use null instead of this. In apply we have one more function , like as I have maximum number I also have minimum number, so let’s say I can use that also, from this we will take min and min, so you can see we are getting 3 as output, let’s do it properly, so( 9 seconds gap) in h3 we will write Example to find maximum and minimum number using apply, okay, we can also print our array with help of document.writeln (3 seconds gap) here we will write br save, okay, example to find maximum and minimum number using apply() and after br we can also print our array here, so let’s say we have already used for…of and for…in loop so we currently have array so we will use for…of.

For value of arr, document.writeln whatever our value is that, here we will write array values are(7 seconds gap) maximum number is (3 seconds gap) and ( 4 seconds gap) minimum number is( 4 seconds gap)so here our program has been formatted properly. So you can see array values are 6 8 4 3, maximum number is 8 and minimum number is 3. So you can see our output looks proper. We have not done much we have added few lines so that the output looks sorted.

So we can do same thing in call method also with employee and permanent employee. So this was our apply method. In apply method we have one more example, we have two arrays one is array and one is new array now I have to add things o both arrays that is first array and second array, means the value 1234 o first array and value 5678 of second array should be combined together and I should get new array with 12345678, so for that also I can use apply method.

(09:46)

So let’s say here I have copied same thing, first is array and in which I am passing 1,2,3,4 and this is our second array, so example to join two arrays, okay, here we have first array 1 and second array 2 which is 5,6,7,8. Okay, so first array in which I have 4 values and another array in which I have another four values, so let’s say I print these, apply underscore 2, here I have apply values are so I will write 1 and then here will come first array values are and we will copy same thing, second array values are 2, so array 1 and array2 and both the values got printed.

Now we have to join both the arrays, for that what will I use? That will be our apply method’s statement, it should be like array, I have to join this in my first array so I will directly write in that only array 1.push, push means pushing something from second array, means adding some content in array 1, if I have to remove something from that which method will I use? I will use pull, now push method is already available, so in array 1 we will use push method, so push.dot apply, means what do we have to apply or add? So we have to add second array in array 1, so arr1 comma arr2, okay so we will have only one number pending(20 seconds gap) concatenated array is, then our array 1 and save.

So we have 2 arrays, array 1 and array2 and here we will add one br, okay so second array values are 5678, now our concatenated array will come here, so we will remove this from here, so in arr1 we will add both things and so our concatenated array is 1 2 3 4 5 6 7 8. So we have two arrays and I have added both the values in first array by apply method, you can see array1 push apply array 1 comma array2, so if I have to add this in array 2 then I will switch the places of array 1 and array 2 and here also array 2 will come, let’s see what is the difference? Here 5 6 7 8 and after that 1 2 3 4 will come.

So this is when we added two arrays, we concatenated it, but which method did we use? We have used apply method of function objects. So here difference between call and apply is when we have to pass array as parameters that time I use apply. So this was apply method, we also saw two examples of apply method one was maximum and minimum and another was concatenating two arrays.

Next is our bind method, bind method is used for what? Bind method is used to create new function , when with help of existing function we have to create new function that time we use bind method. When a function is called, it has its own this keyword set to the provided value, with a given sequence of arguments. So what happens in bind? Whenever we call a function then that function has its own this keyword, this keyword is already set which provides us new values.

How does bind work? In function we took function dot call or function dot apply, similarly, we will take function dot bind, in that also you can see this has been passed here and then we have passed some arguments, as many arguments are available with us we have passed that many. What will happen with help of bind? So let’s say this is our example here, you can see I have called a function with help of bind. Means a new function has been generated, what type of function? A function which will work in a similar manner to that of existing function.

(15:17)

So if you want to create a new function which will work in similar manner to that of existing function that time you can use bind, to join new function with old function or existing function. Here in given example we can see, we have an object named website, in that object we have given name as Java script, means it is our property, we have created a new function of name getName, which is a function returns this dot name, means if we want to return our name of our website Java script, let’s say I have an object and that object has an method and I want to get the name of object, as I don’t know what is the name of object.

I will make a function or property of that object by name getName and through that property I will return the name of that object. We can return anything, let’s say in this website I have given other properties also like color, age etc. here I can make other functions too like getColor and I will return whatever color is written in that, by get Age I will return whatever age is written. With help of return we can get the existing value. I am returning my name, now what am I doing here? You can see here variable unbound getName, means I am creating an object of name unbound getName, a random object, to that what have I given? Website dot getName means I have an object with name website so I am calling that object’s function of name getName, means website dot getName .

Means the object which have been created of name unbound getname, I am binding it with another object. Means I have taken function and now we will see what value will be returned in it when we will run the program, but I will bind this with website named object and for that I will create new object unbound getName and then we will see what output we are getting?

So let’s say we will create a new program for this, and this is for bind, function, save, here what have we done? First we are creating an object i.e. var, we are creating an object named website in which we have taken name equal to let’s say I take learnvern comma and we will make its method so i.e. function with name getName which will return this dot name, so the name will be returned to us.

Now what will I do? Let’s say document.write now I will write website dot getName, okay, so I am calling object website’s function getName randomly. So you can see when I have called this object’s method without doing anything I am getting Learnvern as output. Now what will I do? Now I will create an object let’s say var, we will create new object which is unbound getName, we are creating this without using bind method, that’s why website dot getName that’s it and nothing else, let’s make another variable boundGetName equal to website dot getName, sorry here we will write unbound getName dot bind, the method which I am using and in this we will write object’s name website, okay.

Now we will comment this and now first of all we will print unbound getName let’s see what output we are getting? We are getting function return this dot name means our this portion has come inside unbound getName object. Now through bound getName, what have we done? We have taken some value in this, created object unbound getName and in that we have added webiste’s getName function. So this whole function has been added and you can see in this way.

(20:24)

Now I have bound this with whom? We have bound this with website named object and we have also taken bound name object, through which I will call this function. Let’s say if I print bound getName, then what will I get? Function and some native code is given, but if I write it in this way in form of function then my output is LearnVern, means bound getName has became what? Means my existing object website, in order to get its name we have to bound this with website. Now let’s say I create a new object and I will give it name website 2 and in that I will take Google so save and now if I pass here website 2 and now you can see my output has changed to Google.

Now let’s understand this thing, we created two object and in which we took name as property and in both case we have created same function which will return its name, which is its property. So these both functions are same and that’s why we have taken this in variable unbound getName, we have store in this object. So our whole function body gets stored in unbound getName variable, now I am binding this unbound getName variable with which object? First with website named object and second time with website 2 named object.

So with whichever object I bind this, if name property exists in that object then I will get that through unbound getName method. Let’s say now in this website 2 I will keep nothing, I will keep it empty so after reloading I will get undefined because there is no name in that. Now let’s say if I remove this function from here and then reload it then you can see I am getting Google as output.

Here what can we see? We have used this function with different methods also, how? Means our website named object’ function has to be used on such object which do not have getName property, then in order to perform this operation I have stored this function body in variable unbound getName and through that variable I have bound it with another variable i.e. bound getName, means I have bound function body with some website I bind and then in that object, like website 2, if in any object name property exists then every time I change the name I will get my property.

Let’s say I take here website 3 in which I will take first name instead of name any random name, and in website 4 in which I will take name Hello, so when I will place here website 3 in which name is not there instead first name is given, then I will get undefined. Now let’s say I will write website 4 in which name property exists sow what will I get? I will get Hello. So all those objects in which name property exists from all those I can access its name property through bound getName.

So to conclude what is bind method? Bind method means I am storing a method of an object in variable and I will bind that variable with another object variable then from any random object if so and so property exists then I can take that from that function if it exists. So bind creates anew function and give it to us, in unbound getName I have created a new function, I can generate a new function with help of bind keyword and through that function I can perform operation on other objects also.

(25:17)

It is little difficult to under call, apply and bind but it is one of the important topics because they work through Java script’s object, so this was our bind. Last is tostring, what does tostring do? It converts our existing data in string. So sometimes our function gets converted in string and sometimes our function’s data also get converted in string.

Here what is written? Java script function tostring method returns a string. Here, string represents the source code of the function, means whatever our function’s source code will be, it will get converted in string. For example if I write function dot to string, means whatever data is there it will get converted in string and I will get it. Like function add a b is written here and return a plus b is given here, so as soon as I add to string at add then this whole function will be returned to me in string.

Let’s say example tostring , I will create afunction, function add number 1 comma number 2, return number 1 plus number 2. Now what am I doing? (3 seconds gap) add dot tostring semicolon and save tostring. So you can see our whole function body has been converted in string. If I want this function, like we did in bind almost similar to that if we want to assign this function body in something else then we can bind it but we have to use bind method for that, tostring is only for showing function body in string format, for that we use tostring.

Here you can see after tostring I have performed an operation like ad 10 20, so let’s say add after that in bracket 10 comma 30, answer should be 40. So let’s say what are we getting? 40. But this 40 is not numeric it is in string. Add 10 and 30 gives us what? This gives us from here 10, 30 so returns num1 plus num 2 i.e. 10 plus 30 so this has been returned. So the answer 40 which we are getting, this is our forty, this forty is numeric actually but that 40 gets converted due to dot tostring in string.

Means whatever my return value is if I want to convert that return value in string in that also I will use tostring method. Two things happened here, first here plus br (5 seconds gap) comma 40,(8 seconds gap) okay, you can see here two things can be seen. First when I am doing dot tostring my function is getting converted in string but when after adding in parenthesis numeric value and then apply tostring to it, the summation or the number which I am getting is getting converted in string.

So here both the operations are getting performed, first if we are giving without parameters then our function will get converted in string if we pass parameters then after summation or the function’s operation is first performed and then the result is converted in string, so tostring is used for both purposes, it gives output also and if output is not there if we have not passed parameter then that function body itself gets converted in string, when we develop web application that time we have to perform operations on string that time whatever result we get through previous function or from somewhere else that result is also converted in string with help of string.

So in today’s segment we saw apply bind and tostring methods. In our last segment we saw call and how function objects work? And apart from that we also saw how functions work in Java script. So guys function in Java script is very important topic as it is very deep and we need to understand many things in that as Java script provides us multiple facilities through function.

I hope you have understood all the three segments which we did for functions, if you have any questions related to any of the segments of function or if any question arises while performing practical then do tell us on forum.learnvern.com we will revert back with solutions to your questions.

Our basic of Java script ends here, our next segment onwards we will see what are objects? How do they work? All the properties related to object we will continue from next segment. So next is object in Java scripts.

Thank you.

(video duration- 31 minutes 25 seconds)