Now I said for arrow functions that would be different,
so let's have a look at this.
If I switch this back to be an arrow function and we log this, let's save that,
Nothing else changed and click on search and now we see, it's the window again. arrow functions have a lot
of advantages,
for example shorter syntax and so on and one other advantage which they have which really only makes
sense now that we know about this is that they don't know this. Every function has its own
this, every function created with the function keyword or with this method shortcut here has its own
this binding,
so in the end it ensures that this inside of that function is bound to something,
it's bound to whatever is responsible for executing the function.
Now arrow functions don't bind this to anything,
therefore if we use the this keyword in there, we're not getting an error
but this simply is not overwritten by the function,
this instead refers to the exact same thing
it would refer to outside of the function
so here for example and this, just in our script like this, will refer to the global window,
that's what this would refer to.
Now if you paid close attention, this might be strange, shouldn't use strict lead to undefined being logged
here?
Why do we log the window? Use strict indeed leads to undefined being logged instead of the global window
object
if you're using this in a normal function with the function keyword and this is not bound to anything
else, that's the use case we had earlier, few lectures ago. Now
arrow functions don't know this, they don't know the this keyword, therefore they don't trigger this strict
mode fix or however you want to call it, where this inside of functions doesn't lead to the global
object being referenced because this inside of an arrow function behaves exactly like this
outside of that arrow function because again, arrow functions simply don't know this,
they don't assign any special meaning to it,
this instead just behaves as outside of the arrow function and there, strict mode does not lead to this,
not referring to the global object, that's just a fix that is applied to this inside of normal functions
that's not bound to anything else. So that's one special behavior about arrow functions
and here it might look like an undesired behavior,
it certainly is if you're interested in getting that event triggering thing, though as you will learn
in the events module, there are other ways of getting access to that
but then this might be undesired but actually in a lot of use cases,
arrow functions can fix strange this behavior.
Now let's see if they help us here with get formatted title.
If we switch away from that shorthand to an arrow function notation, let's see how that node behaves.
If we save that and we reload here and I enter Javascript level 5 and click add movie, I get an error
and we see here,
this is what's getting logged from line 60 which is exactly that log inside of this function and
we see that this again refers to the window function, not to the surrounding object because this refers
to the same thing it would refer to outside of the function.
Now you might say, that's the object but that's not the case,
you can't write this here,
this would be invalid, outside of the function,
this object isn't a thing where you could write any code,
you can't just have key-value pairs in there.
So the next place where you can write code is here
and that's again in your main script and therefore this refers to the global object or
that is our window here.
So here, an arrow function of course doesn't help us,
it just ensures that this refers to the wrong thing and hence I will revert that here.
Just keep it in mind that arrow functions don't bind this to anything, instead they keep the context
or the binding this has to the binding it would have outside of the function and that will become interesting
again a little bit later once we dive deeper into objects and different ways of creating objects as
you will see then.
For now, just be aware of that special behavior of arrow functions,
they work differently with this than normal functions, with the function keyword and that can or cannot
be desired,
right now we have no real advantage of that,
again we'll see one later, at the moment
it's just important to be aware of these differences.
Now I want to show you an example where arrow functions could be helpful though, let's say we have a
constant, members and this is an object, holds an object, where we have a team name of let's say blue rockets
or whatever you want and then we have the people key in there which holds an array where we maybe have Max
and Manuel. Now I also want to have a method in there,
get team members where my goal is to combine the team title with the people names.
Now this is not an arrow function but a regular method using this shorthand syntax and by hitting shift
and enter, we can write some multiline code here and now here, I want to go through all people and console
log the name combined with the team name.
Now one way to achieve this, where an arrow function will shine, is to use this.people,
this should normally refer to this object depending on how we call get team members.
So this.people
and then ForEach, execute something.
So there we have a single person,
I'll just use p as a parameter name here and in this inner function here,
I now want to output this name combined with the team name.
So here I will say console log and then p is that person name plus
and then maybe a dash here, so I'm concatenating a string here in the end
and then this.teamName,
right,
that should work. If I hit enter and then we call members.getTeamMembers,
let's see what that yields.
This should refer to our members object inside of get team members because I'm calling get team members
on members like this with a dot,
so this should refer to members
and if I hit enter, I get Max blue rockets, Manuel blue rockets and so on. Now I do get this because I created
this with an arrow function here inside of ForEach,
now let me show you how this would work without an arrow function there.
Copy that and reload the page to recreate this members object
and now let's instead use a function with the function keyword here which gets that person and the rest
is the same,
so the logic doesn't change, just the way I define this function inside of ForEach changed.
If I now hit enter to create that members object and I now call get team members,
we get Max undefined, Manuel undefined.
Previously it worked,
now it doesn't anymore,
now why is that?
The reason is the way we create this function which we pass to ForEach.
Now when I create this function like this with the function keyword, this is bound. I mentioned that functions
created with the function keyword bind this inside of them,
now to what is this bound here?
Well let's have a look.
Let's copy that again and reload
and then also add another console log statement here where we console log this inside of this inner
function. If I now call members.getTeamMembers, we see this is what this refers to inside of the function,
it's our good old window again.
Now why is it the window?
Because here we define this function. This function gets executed on our behalf by ForEach and that in the end
happens when we call get team members here.
So we don't know how exactly the browser executes function here for us. For event listeners, we saw that
there, it would actually bind this to the object that triggered the event, that was something the browser
did,
now for ForEach, it doesn't seem to do any binding and therefore it just lets this be bound
to the global object.
It certainly does not bind it to the surrounding object because this function gets executed because
of ForEach, which is inside of that object but that's the only connection,
it's not our object itself that would trigger this function somehow,
instead it's ForEach and therefore the browser which triggers this function.
So this has the wrong value when we use it like that and the correct value if we use an arrow function
instead here inside of ForEach
because the arrow function doesn't change the binding of this and therefore this has the binding it
would have if we write it outside of this function
and what is outside of this function?
Right,
it's the get team members function and what is the binding of this in get team members?
It's our object.
That's why it works if we have an arrow function here
and why doesn't work when we have this function. This function tries to bind this and it binds it to
what this refers to when the function executes which is the global object, with an arrow function
this is bound to nothing,
hence it keeps its reference it would have outside of this function which is inside of the get
team members function which is this member's object. Now if that is a lot of new information to digest,
don't worry, we'll work a lot with this and with objects throughout the next modules and throughout the
entire course,
so there will be plenty of places to practice this but the general idea of this should be clear right
now and definitely re-watch these last lectures to get a good understanding of what this refers to and
how it behaves in Javascript because it can be difficult to grasp and therefore, it's super important to have
a solid understanding off that and to really go through these explanations where I do explain what this
refers to.