1
00:00:02,400 --> 00:00:05,130
Now I said for arrow functions that would be different,

2
00:00:05,250 --> 00:00:06,310
so let's have a look at this.

3
00:00:07,230 --> 00:00:12,060
If I switch this back to be an arrow function and we log this, let's save that,

4
00:00:12,060 --> 00:00:18,480
Nothing else changed and click on search and now we see, it's the window again. arrow functions have a lot

5
00:00:18,480 --> 00:00:19,340
of advantages,

6
00:00:19,350 --> 00:00:25,020
for example shorter syntax and so on and one other advantage which they have which really only makes

7
00:00:25,020 --> 00:00:32,200
sense now that we know about this is that they don't know this. Every function has its own

8
00:00:32,250 --> 00:00:39,480
this, every function created with the function keyword or with this method shortcut here has its own

9
00:00:39,630 --> 00:00:40,930
this binding,

10
00:00:40,950 --> 00:00:46,220
so in the end it ensures that this inside of that function is bound to something,

11
00:00:46,230 --> 00:00:51,150
it's bound to whatever is responsible for executing the function.

12
00:00:51,150 --> 00:00:54,950
Now arrow functions don't bind this to anything,

13
00:00:54,960 --> 00:00:58,620
therefore if we use the this keyword in there, we're not getting an error

14
00:00:58,740 --> 00:01:02,160
but this simply is not overwritten by the function,

15
00:01:02,160 --> 00:01:05,010
this instead refers to the exact same thing

16
00:01:05,130 --> 00:01:07,160
it would refer to outside of the function

17
00:01:07,170 --> 00:01:15,020
so here for example and this, just in our script like this, will refer to the global window,

18
00:01:15,030 --> 00:01:16,940
that's what this would refer to.

19
00:01:18,220 --> 00:01:24,610
Now if you paid close attention, this might be strange, shouldn't use strict lead to undefined being logged

20
00:01:24,610 --> 00:01:24,940
here?

21
00:01:24,940 --> 00:01:32,050
Why do we log the window? Use strict indeed leads to undefined being logged instead of the global window

22
00:01:32,050 --> 00:01:33,190
object

23
00:01:33,190 --> 00:01:40,360
if you're using this in a normal function with the function keyword and this is not bound to anything

24
00:01:40,360 --> 00:01:43,960
else, that's the use case we had earlier, few lectures ago. Now

25
00:01:44,110 --> 00:01:51,400
arrow functions don't know this, they don't know the this keyword, therefore they don't trigger this strict

26
00:01:51,400 --> 00:01:58,630
mode fix or however you want to call it, where this inside of functions doesn't lead to the global

27
00:01:58,630 --> 00:02:04,960
object being referenced because this inside of an arrow function behaves exactly like this

28
00:02:05,020 --> 00:02:10,540
outside of that arrow function because again, arrow functions simply don't know this,

29
00:02:10,600 --> 00:02:13,050
they don't assign any special meaning to it,

30
00:02:13,090 --> 00:02:20,590
this instead just behaves as outside of the arrow function and there, strict mode does not lead to this,

31
00:02:20,590 --> 00:02:27,170
not referring to the global object, that's just a fix that is applied to this inside of normal functions

32
00:02:27,250 --> 00:02:33,990
that's not bound to anything else. So that's one special behavior about arrow functions

33
00:02:33,990 --> 00:02:36,680
and here it might look like an undesired behavior,

34
00:02:36,690 --> 00:02:41,940
it certainly is if you're interested in getting that event triggering thing, though as you will learn

35
00:02:41,940 --> 00:02:45,370
in the events module, there are other ways of getting access to that

36
00:02:45,540 --> 00:02:49,660
but then this might be undesired but actually in a lot of use cases,

37
00:02:49,800 --> 00:02:54,790
arrow functions can fix strange this behavior.

38
00:02:54,870 --> 00:02:58,430
Now let's see if they help us here with get formatted title.

39
00:02:58,470 --> 00:03:05,690
If we switch away from that shorthand to an arrow function notation, let's see how that node behaves.

40
00:03:05,850 --> 00:03:13,710
If we save that and we reload here and I enter Javascript level 5 and click add movie, I get an error

41
00:03:14,100 --> 00:03:14,900
and we see here,

42
00:03:14,910 --> 00:03:21,050
this is what's getting logged from line 60 which is exactly that log inside of this function and

43
00:03:21,060 --> 00:03:27,570
we see that this again refers to the window function, not to the surrounding object because this refers

44
00:03:27,570 --> 00:03:30,700
to the same thing it would refer to outside of the function.

45
00:03:30,720 --> 00:03:34,290
Now you might say, that's the object but that's not the case,

46
00:03:34,350 --> 00:03:36,260
you can't write this here,

47
00:03:36,270 --> 00:03:39,050
this would be invalid, outside of the function,

48
00:03:39,060 --> 00:03:43,020
this object isn't a thing where you could write any code,

49
00:03:43,020 --> 00:03:44,930
you can't just have key-value pairs in there.

50
00:03:45,300 --> 00:03:48,170
So the next place where you can write code is here

51
00:03:48,210 --> 00:03:53,300
and that's again in your main script and therefore this refers to the global object or

52
00:03:53,370 --> 00:03:55,070
that is our window here.

53
00:03:55,140 --> 00:03:58,020
So here, an arrow function of course doesn't help us,

54
00:03:58,080 --> 00:04:04,540
it just ensures that this refers to the wrong thing and hence I will revert that here.

55
00:04:04,710 --> 00:04:10,950
Just keep it in mind that arrow functions don't bind this to anything, instead they keep the context

56
00:04:11,000 --> 00:04:18,000
or the binding this has to the binding it would have outside of the function and that will become interesting

57
00:04:18,000 --> 00:04:23,970
again a little bit later once we dive deeper into objects and different ways of creating objects as

58
00:04:23,970 --> 00:04:25,180
you will see then.

59
00:04:25,530 --> 00:04:28,640
For now, just be aware of that special behavior of arrow functions,

60
00:04:28,650 --> 00:04:35,220
they work differently with this than normal functions, with the function keyword and that can or cannot

61
00:04:35,220 --> 00:04:35,970
be desired,

62
00:04:35,970 --> 00:04:38,440
right now we have no real advantage of that,

63
00:04:38,490 --> 00:04:41,520
again we'll see one later, at the moment

64
00:04:41,520 --> 00:04:44,490
it's just important to be aware of these differences.

65
00:04:44,490 --> 00:04:50,610
Now I want to show you an example where arrow functions could be helpful though, let's say we have a

66
00:04:50,610 --> 00:05:02,080
constant, members and this is an object, holds an object, where we have a team name of let's say blue rockets

67
00:05:02,080 --> 00:05:12,020
or whatever you want and then we have the people key in there which holds an array where we maybe have Max

68
00:05:12,550 --> 00:05:16,600
and Manuel. Now I also want to have a method in there,

69
00:05:16,850 --> 00:05:24,200
get team members where my goal is to combine the team title with the people names.

70
00:05:24,210 --> 00:05:30,380
Now this is not an arrow function but a regular method using this shorthand syntax and by hitting shift

71
00:05:30,380 --> 00:05:37,520
and enter, we can write some multiline code here and now here, I want to go through all people and console

72
00:05:37,520 --> 00:05:39,910
log the name combined with the team name.

73
00:05:39,980 --> 00:05:47,390
Now one way to achieve this, where an arrow function will shine, is to use this.people,

74
00:05:47,480 --> 00:05:52,490
this should normally refer to this object depending on how we call get team members.

75
00:05:52,490 --> 00:05:53,990
So this.people

76
00:05:53,990 --> 00:05:57,830
and then ForEach, execute something.

77
00:05:57,920 --> 00:06:00,110
So there we have a single person,

78
00:06:00,110 --> 00:06:06,640
I'll just use p as a parameter name here and in this inner function here,

79
00:06:06,910 --> 00:06:11,410
I now want to output this name combined with the team name.

80
00:06:11,410 --> 00:06:17,910
So here I will say console log and then p is that person name plus

81
00:06:17,920 --> 00:06:22,000
and then maybe a dash here, so I'm concatenating a string here in the end

82
00:06:22,000 --> 00:06:24,310
and then this.teamName,

83
00:06:24,310 --> 00:06:24,870
right,

84
00:06:24,880 --> 00:06:31,240
that should work. If I hit enter and then we call members.getTeamMembers,

85
00:06:31,240 --> 00:06:32,770
let's see what that yields.

86
00:06:32,860 --> 00:06:39,160
This should refer to our members object inside of get team members because I'm calling get team members

87
00:06:39,580 --> 00:06:41,200
on members like this with a dot,

88
00:06:41,200 --> 00:06:43,270
so this should refer to members

89
00:06:43,380 --> 00:06:52,320
and if I hit enter, I get Max blue rockets, Manuel blue rockets and so on. Now I do get this because I created

90
00:06:52,320 --> 00:06:56,000
this with an arrow function here inside of ForEach,

91
00:06:56,020 --> 00:06:59,340
now let me show you how this would work without an arrow function there.

92
00:06:59,340 --> 00:07:04,200
Copy that and reload the page to recreate this members object

93
00:07:04,200 --> 00:07:11,190
and now let's instead use a function with the function keyword here which gets that person and the rest

94
00:07:11,190 --> 00:07:11,760
is the same,

95
00:07:11,760 --> 00:07:17,820
so the logic doesn't change, just the way I define this function inside of ForEach changed.

96
00:07:17,880 --> 00:07:22,350
If I now hit enter to create that members object and I now call get team members,

97
00:07:22,350 --> 00:07:25,430
we get Max undefined, Manuel undefined.

98
00:07:25,440 --> 00:07:26,630
Previously it worked,

99
00:07:26,640 --> 00:07:27,970
now it doesn't anymore,

100
00:07:27,990 --> 00:07:29,640
now why is that?

101
00:07:29,650 --> 00:07:34,780
The reason is the way we create this function which we pass to ForEach.

102
00:07:34,780 --> 00:07:42,280
Now when I create this function like this with the function keyword, this is bound. I mentioned that functions

103
00:07:42,310 --> 00:07:46,440
created with the function keyword bind this inside of them,

104
00:07:46,450 --> 00:07:49,390
now to what is this bound here?

105
00:07:49,390 --> 00:07:50,870
Well let's have a look.

106
00:07:50,920 --> 00:07:53,440
Let's copy that again and reload

107
00:07:53,440 --> 00:07:59,080
and then also add another console log statement here where we console log this inside of this inner

108
00:07:59,080 --> 00:08:06,850
function. If I now call members.getTeamMembers, we see this is what this refers to inside of the function,

109
00:08:06,850 --> 00:08:09,030
it's our good old window again.

110
00:08:09,040 --> 00:08:10,450
Now why is it the window?

111
00:08:10,450 --> 00:08:17,820
Because here we define this function. This function gets executed on our behalf by ForEach and that in the end

112
00:08:17,830 --> 00:08:20,710
happens when we call get team members here.

113
00:08:20,710 --> 00:08:26,920
So we don't know how exactly the browser executes function here for us. For event listeners, we saw that

114
00:08:26,920 --> 00:08:33,340
there, it would actually bind this to the object that triggered the event, that was something the browser

115
00:08:33,340 --> 00:08:33,840
did,

116
00:08:33,910 --> 00:08:39,430
now for ForEach, it doesn't seem to do any binding and therefore it just lets this be bound

117
00:08:39,460 --> 00:08:41,420
to the global object.

118
00:08:41,500 --> 00:08:47,710
It certainly does not bind it to the surrounding object because this function gets executed because

119
00:08:47,710 --> 00:08:51,850
of ForEach, which is inside of that object but that's the only connection,

120
00:08:51,850 --> 00:08:55,810
it's not our object itself that would trigger this function somehow,

121
00:08:55,810 --> 00:09:00,630
instead it's ForEach and therefore the browser which triggers this function.

122
00:09:01,120 --> 00:09:08,870
So this has the wrong value when we use it like that and the correct value if we use an arrow function

123
00:09:08,870 --> 00:09:10,790
instead here inside of ForEach

124
00:09:10,790 --> 00:09:17,900
because the arrow function doesn't change the binding of this and therefore this has the binding it

125
00:09:17,900 --> 00:09:20,660
would have if we write it outside of this function

126
00:09:20,720 --> 00:09:22,730
and what is outside of this function?

127
00:09:23,000 --> 00:09:23,420
Right,

128
00:09:23,420 --> 00:09:28,690
it's the get team members function and what is the binding of this in get team members?

129
00:09:28,790 --> 00:09:29,970
It's our object.

130
00:09:30,110 --> 00:09:32,820
That's why it works if we have an arrow function here

131
00:09:32,890 --> 00:09:39,110
and why doesn't work when we have this function. This function tries to bind this and it binds it to

132
00:09:39,110 --> 00:09:44,580
what this refers to when the function executes which is the global object, with an arrow function

133
00:09:44,600 --> 00:09:46,550
this is bound to nothing,

134
00:09:46,610 --> 00:09:51,230
hence it keeps its reference it would have outside of this function which is inside of the get

135
00:09:51,230 --> 00:09:59,530
team members function which is this member's object. Now if that is a lot of new information to digest,

136
00:09:59,710 --> 00:10:05,050
don't worry, we'll work a lot with this and with objects throughout the next modules and throughout the

137
00:10:05,050 --> 00:10:06,160
entire course,

138
00:10:06,160 --> 00:10:12,850
so there will be plenty of places to practice this but the general idea of this should be clear right

139
00:10:12,880 --> 00:10:20,620
now and definitely re-watch these last lectures to get a good understanding of what this refers to and

140
00:10:20,620 --> 00:10:27,250
how it behaves in Javascript because it can be difficult to grasp and therefore, it's super important to have

141
00:10:27,250 --> 00:10:33,400
a solid understanding off that and to really go through these explanations where I do explain what this

142
00:10:33,400 --> 00:10:34,030
refers to.