Hi, and welcome to [texted] tutorials in Javascript a functions call apply and buying seems to be
doing exactly the same thing, but there's so much confusion around it and when to use it and how it really works, so
When I started learning Javascript, it was so difficult to understand it because there were very little documentation
available on this and
Whatever. I find can confused me even further so
Based on my understanding so far. I've created this very simple tutorial to explain it to you
the difference between call apply and bind
Traditionally you have objects with properties and methods
And each object would have its own property and its own method for example here in
Object one you have its own properties and method object two has its own properties and method
But in Javascript, you can [do] something more interesting
object one can have its own property object two can it has can have its own property and
You can write methods separately and using call it apply or bind
You can use this methods on
this objects
This way you can write common method for various objects the best way to actually learn is by
Coding so we are going to do some coding here
I'm going to use this wonderful website [called] JsFiddle net to actually demonstrate
call Applied function, so
Here you can write your hTML in this block?
css in this block and [Javascript] in this block and when you when you click on run it executes and
give the result over here and
The bottom here. I've opened up console as well, so I'm going to start by building an object
so we have an object called OBj equal to Aa
num
so this object has a property called num and it has a value called [2] and
I'm going to have a variable add
to this
equal to function
and
it has an argument a
So and it's also very simple function all it does it returns
this dot num
plus A
So let's say if num is 2 and a is 2 then it will return for now as you can see
this object does not have any method associated with like add to this and
this
method
Does not have any property called num however it has this
it's returning this dot num, so
if I wanna
If I [wanna] take [action] on this object using this method I can do it
By using a call function, so the way, it works is first first you would
You would
Take the method which is add to this
dot call whichever function you want to execute you you put it fresh, and then don't call and
Here you would pass two arguments the first argument would be
The object you are applying this
dysfunction to calling this function [2]
so which would be object and
the second argument would be the
Arguments for the function itself which would be a here
So the a would be let's say if I'm passing 3 here ok so
The function is this the object I'm passing here and the argument is coming from here
[ok] so in in a way. We are we are we are saying function name of name function name?
dot call is
object and then function
arguments
This is what's happening
we have a function name that call and in the arguments we passing the object and and
Arguments for the function itself goes here okay, so let's consult [our]
lock this thing
If you don't know console dot log
would basically
Print out the result of this operation
because this function returns this num plus a
so if I run this
I'll get five
So what really happened here is?
this function was called for this object and
the the property of the [object]
was accessed using this dot num and
The argument three was added to the value because num this dot num will be [two]
Plus the argument would be 3 and then the returning five so that's what it is
again if you have any confusion a question feel free to
Send me an email or post message there
Okay, now the second [thing]. We're going to learn is call
Here also what you can do is let's say if you have multiple arguments. Let's say five if I have a b and C
[okay], and
What I'm [doing] is I'm also adding a b and C here now
How do I pass these three arguments into the one so I would simply I can simply write this argument here directly
but the first argument has to be the object itself that you you [are] calling this function too, and
then into the three argument, so in this case the result would be one plus two [plus] three plus the number which is 2
So 2 plus 1 which is [3] plus 2 [is] 5 and?
Plus 3 is 8
so if I if I run this by the way
You can clear the console by using this I run this I would get the the answer 8
Here, so that's what [that's] what the call does it attaches
This function to this object
Temporarily and then runs it and gives the result back as if it's a part [of] this object itself
[call] is very similar
But instead as you see here you [have] arguments, Abc
Instead I can actually create an array here. I can create an array call [the] bar
Array equal to
1 2 3
and I
can just copy this and
Paste it here instead of call. I'm just going to replace it apply and
instead of this
Arguments 1 2 3 I am going [to] pass this array of arguments, so it's going to be a are off
So the syntax [was] not much difference, and it does pretty much exactly the same
so if I call this let me consult this out, and if I I'm going to
Do this and if I did did this it would also get 8?
So I don't have to pass all the argument I can combine all the argument in an array. That's the only difference between Corner apply
Now bind is a little different
How does a bind work let's see, so I'm just gonna
Just kind of take some of these things out
also, [let's] say if you have another object called Object [2]
And let's say it has a non value is 5 for example
In this case I can actually
Call Apply this
object to
to the same with the same argument, and it would produce a different result so in this case instead of to the
The num would be 5 and so it would give me 3 more, so it would be about 11. Let's see
so be 8 and 11
As you can see so this how it's attacking instead of this objects. It's actually applying this object, so
[that] is a that is a use for it there are other use users for you, and other wonderful users for it
I'll have to create another tutorial for it, but
For now to understand this this should be sufficient
Now let's look at bind
so let me just remove this object here first [and]
also this stuff first
So here instead of apply. I can simply say bind
[however]
This would not give me
the the result here, so let's see if I if I did this
It's actually giving me a function insert of value
So buying is a little bit different bian gives me a function. Which has ability to execute this so it actually attaches
the object this object and makes add to this part of
is a method of this object and gives me back the
object in a in a [different] way, so if I if I create another object
So instead of this so I can just simply [say] I
Can create another object called war?
bound
equal to this so and I can
say
now
when I do the bat when I bind to this function with this object
I don't really need to pass the argument because the argument I can directly pass into the
The executed object so now apply this console.log visit
in
Sort of console uggams, it's a console dir, and I'm just going to see what what is being a return here?
Let me do this
So it gave me a function called bound so it bounded this object
With this method it did not return me this
This still has to happen
[I] still need to execute this function to do this in call and apply it would simply giving me the result of
this
execution of this function, but
When I use, bind it does not execute this function it. You know it gives me a writ
it gives me a function back which I can execute a later time so if you look at this function bound
there are some interesting things here uh
It you would see this
If you expand it you [would] see a target function, okay?
Which is this add to this and it has these three arguments here?
it would see you would see bound this which is the object this guy as
You can see and it has this
property num equal to two and then it would have this a
bounded argument
It's an array in order to run this I would have to call this function
So I'm just first we're going to in order to run this I'm going to have to call this function
bound and
Now I don't have to pass. You know the object because is objects already bounded to this so all either simply passes argument
Which is a b and C. So [I] can simply do this in
This term it works more like a call. You know because you can pass the the argument itself and
Let's say if I console dot log is saying see how it works
And it would give me eight
So in nutshell you have an object you have a function with a bunch of arguments you can call
using function name call
Object and argument, you pass it like this when you do apply
Instead of like this you just pass an array. That's the only difference in
bind
you first only apply you only pass the object itself and
Then it will return a bound function and then you can execute this bound function by passing the argument
If it's not clear, if this is not clear [-] please send me an email
And I'll respond it to you
Thank you if you [like] this tutorial please subscribe to my channel like the video and provide
Constructive comment, and if you have a question regarding anything that I've covered in this tutorial
Please feel free to actually email me or provide a comment
And if there is any topic that you would like to be covered
Then just email me and I will be able to provide a tutorial on that topic within a week or two