1
00:00:02,110 --> 00:00:07,270
So that was a lot of important and very useful objects syntax which you'll encounter a lot throughout your

2
00:00:07,270 --> 00:00:08,800
Javascript career,

3
00:00:08,830 --> 00:00:12,610
time for something totally new, the this keyword

4
00:00:12,620 --> 00:00:14,710
and what's the this keyword?

5
00:00:14,710 --> 00:00:21,370
Well let's say on our movie here, we of course have our title right, now we want to make sure that we

6
00:00:21,370 --> 00:00:26,890
can actually output this title in all upper case.

7
00:00:26,890 --> 00:00:35,280
Now of course that can easily be achieved if you go to the place where you use the title, here, and then

8
00:00:35,280 --> 00:00:40,080
for examples since title is a string, there is a specific string method which you just have to know and

9
00:00:40,080 --> 00:00:45,290
hence I'm telling you right now, there is a toUppercase method available on every string

10
00:00:45,300 --> 00:00:55,180
and if we call that and reload here and I add Javascript level 5, click add movie you see Javascript

11
00:00:55,180 --> 00:00:56,800
is all uppercase.

12
00:00:56,890 --> 00:01:02,680
Now that's not too fancy, right? Now we have to call toUppercase here and obviously there is

13
00:01:02,680 --> 00:01:03,630
nothing wrong with that,

14
00:01:03,640 --> 00:01:03,850
right?

15
00:01:03,850 --> 00:01:10,150
Don't get me wrong, there's nothing wrong with calling toUppercase here but sometimes you want to bake

16
00:01:10,150 --> 00:01:12,620
certain logic into your objects,

17
00:01:12,670 --> 00:01:21,740
it would be nice if we had a method in here, for example get formatted title or anything like that,

18
00:01:21,880 --> 00:01:29,900
so a function stored in here which returns us this formatted title, this would be nice to have.

19
00:01:29,920 --> 00:01:35,770
Well there is a specific keyword available in Javascript which you cannot just use inside of functions

20
00:01:36,010 --> 00:01:41,200
which are part of objects but actually everywhere in your code but which is most important when you

21
00:01:41,200 --> 00:01:46,490
use it inside of functions that are part of objects and that's the this keyword.

22
00:01:46,680 --> 00:01:52,420
The this keyword can be quite complex, though actually it's pretty easy to remember what it refers to.

23
00:01:52,870 --> 00:01:57,290
Inside of a function, no matter if that function is part of an object or not,

24
00:01:57,340 --> 00:02:06,730
the this keyword will refer to whatever called that function, whatever was responsible for executing

25
00:02:06,730 --> 00:02:12,320
that function you could say. Now you might say that's me, the developer but I mean in your code of course.

26
00:02:12,470 --> 00:02:20,200
Now let me give you an example, let's say here we want to return this.info.title.toUppercase

27
00:02:20,260 --> 00:02:25,180
so that this conversion logic is inside of our object.

28
00:02:25,300 --> 00:02:30,970
That's something you often want to do in programming, you want to put logic into your objects and thus

29
00:02:30,970 --> 00:02:36,340
far in this course, we always just use objects to store data,

30
00:02:36,340 --> 00:02:43,960
nothing wrong with that but you get more flexibility if you're willing or if you're able to put logic

31
00:02:43,960 --> 00:02:50,170
into your objects as well because then you have these shareable data containers which do not just yield

32
00:02:50,170 --> 00:02:54,580
you data which you then have to work with and maybe transform

33
00:02:54,580 --> 00:03:00,070
once you pulled it out of the object but which also include certain included logic which is kind of

34
00:03:00,160 --> 00:03:07,030
in a box which you can just tap into to get it to run, to do something and the this keyword is key here

35
00:03:07,060 --> 00:03:12,880
because otherwise without it, this here would not look for the info property in the object,

36
00:03:12,880 --> 00:03:18,970
this would look for some info variable around it and really behave strangely or in this case since we

37
00:03:18,970 --> 00:03:20,470
have no info variable,

38
00:03:20,470 --> 00:03:21,970
just fail.

39
00:03:22,060 --> 00:03:25,380
So this is the keyword to tell Javascript

40
00:03:25,630 --> 00:03:30,080
look into the object where this function is part of, though to be precise as you learned,

41
00:03:30,100 --> 00:03:36,770
look at the thing which is responsible for executing the function which typically is this object

42
00:03:36,790 --> 00:03:42,220
since this function is part of that object and then dive into some info property, into some title

43
00:03:42,220 --> 00:03:46,000
property and try to call toUppercase on this.

44
00:03:46,000 --> 00:03:54,740
Now with that, we can go to the place where we pull out data from our movie and here, this object

45
00:03:54,740 --> 00:04:00,570
destructuring where I get my title is no longer needed but we can actually also use object destructuring

46
00:04:00,590 --> 00:04:02,210
on a method if we want to,

47
00:04:02,420 --> 00:04:03,960
we don't have to but we can,

48
00:04:03,980 --> 00:04:12,530
so here get formatted title is the name and we can therefore just extract get formatted title from movie,

49
00:04:12,590 --> 00:04:17,750
not from info because it's actually part of the movie object itself, it's not part of info, if I would

50
00:04:17,750 --> 00:04:23,600
put it into info, we would get problems in the for/in loop where I would have to include it in my if check

51
00:04:23,600 --> 00:04:27,230
there basically. So I'm just pulling it out of movie like this

52
00:04:27,230 --> 00:04:33,450
and then here where I need my title, I can just execute it as a function because it is a function.

53
00:04:33,470 --> 00:04:38,330
Now let's actually not do this right now however, I'll comment it out for a moment because right now

54
00:04:38,330 --> 00:04:43,460
we would run into a problem here which we don't fully understand yet and instead, let's just do movie

55
00:04:43,460 --> 00:04:51,410
.getFormattedTitle. You might think it's totally equal to using destructuring here but it's actually

56
00:04:51,410 --> 00:04:53,430
not and I will explain why in a second,

57
00:04:53,450 --> 00:04:55,160
for now let's do it like this.

58
00:04:55,220 --> 00:05:01,220
So now I'm calling get formatted title on my movie object because it is a part of that movie object,

59
00:05:01,250 --> 00:05:09,950
it's a method in that movie object and if I now save that and I reload and I enter Javascript here, level 5

60
00:05:09,950 --> 00:05:13,990
and click add movie, we see an uppercase title down there,

61
00:05:14,000 --> 00:05:17,330
so our method works and the this keyword works.

62
00:05:17,330 --> 00:05:19,110
Now what is this referring to?

63
00:05:19,160 --> 00:05:24,470
I said it's the thing which is responsible for calling the function and there's a really easy way of

64
00:05:24,770 --> 00:05:27,700
memorizing how you see what is responsible,

65
00:05:27,710 --> 00:05:30,890
it's always the thing in front of the function,

66
00:05:30,890 --> 00:05:37,130
so here we have a dot in that movie, therefore movie is the thing which is responsible for executing

67
00:05:37,130 --> 00:05:44,390
get formatted title, that's perfect because movie is the object with the title property in the info property

68
00:05:44,600 --> 00:05:50,180
and therefore this refers to this movie object and we can dive into info.title.toUppercase.