1
00:00:01,597 --> 00:00:02,431
Now,

2
00:00:02,431 --> 00:00:05,530
we added our first class here and at the moment,

3
00:00:05,530 --> 00:00:07,780
it's already useful to allow us to

4
00:00:07,780 --> 00:00:11,343
create multiple objects with different properties.

5
00:00:12,390 --> 00:00:13,535
But as I mentioned before,

6
00:00:13,535 --> 00:00:16,838
you can always add logic to your own classes.

7
00:00:16,838 --> 00:00:18,760
You can add your own methods

8
00:00:18,760 --> 00:00:21,210
just as to build in date

9
00:00:21,210 --> 00:00:22,630
blueprint has this

10
00:00:22,630 --> 00:00:24,483
to ISO string method,

11
00:00:25,540 --> 00:00:27,240
and you can add your own methods

12
00:00:27,240 --> 00:00:30,600
by simply adding them inside of this

13
00:00:30,600 --> 00:00:31,433
class

14
00:00:31,433 --> 00:00:32,420
block.

15
00:00:32,420 --> 00:00:34,940
So not inside of the constructor,

16
00:00:34,940 --> 00:00:36,840
you only use the constructor to

17
00:00:36,840 --> 00:00:38,720
initialize your object

18
00:00:38,720 --> 00:00:43,300
and to add the properties with which it should start.

19
00:00:43,300 --> 00:00:45,660
But methods on the other hand are added

20
00:00:45,660 --> 00:00:49,130
to the class like that after the constructor.

21
00:00:49,130 --> 00:00:50,460
For example here,

22
00:00:50,460 --> 00:00:52,220
we could add a describe

23
00:00:53,350 --> 00:00:54,711
method

24
00:00:54,711 --> 00:00:56,360
where I wanna,

25
00:00:56,360 --> 00:00:59,290
output some information about the job

26
00:00:59,290 --> 00:01:01,000
and here we could use that

27
00:01:01,000 --> 00:01:03,380
template literal feature we learned about

28
00:01:03,380 --> 00:01:04,239
and say,

29
00:01:04,239 --> 00:01:05,072
I'm

30
00:01:05,072 --> 00:01:05,906
a,

31
00:01:05,906 --> 00:01:08,330
and then add the title

32
00:01:08,330 --> 00:01:10,660
and we'll do that in a second.

33
00:01:10,660 --> 00:01:12,090
Then we add a comma and say,

34
00:01:12,090 --> 00:01:14,030
I work in

35
00:01:14,030 --> 00:01:17,360
and have another placeholder for the location.

36
00:01:17,360 --> 00:01:18,910
And then I maybe say,

37
00:01:18,910 --> 00:01:20,039
and I earn,

38
00:01:20,039 --> 00:01:23,423
and we have a last placeholder for the salary.

39
00:01:24,590 --> 00:01:26,580
Now the question just is

40
00:01:26,580 --> 00:01:29,763
how do we fill those placeholders?

41
00:01:30,672 --> 00:01:32,050
Well in the end here,

42
00:01:32,050 --> 00:01:33,430
I want to refer to the title.

43
00:01:33,430 --> 00:01:35,850
Here I want to refer to the location

44
00:01:35,850 --> 00:01:37,980
and here in the last place holder,

45
00:01:37,980 --> 00:01:39,733
I want to refer to the salary.

46
00:01:40,720 --> 00:01:43,720
Now these are all properties in this object,

47
00:01:43,720 --> 00:01:45,851
but how can we now refer to these properties

48
00:01:45,851 --> 00:01:47,158
from inside a method

49
00:01:47,158 --> 00:01:49,653
that belongs to the same object?

50
00:01:50,920 --> 00:01:54,290
We can't just use the property name like that.

51
00:01:54,290 --> 00:01:56,410
If I just type title here,

52
00:01:56,410 --> 00:01:57,900
I'm not getting an error,

53
00:01:57,900 --> 00:02:00,680
but actually title won't be defined

54
00:02:00,680 --> 00:02:01,820
in this function,

55
00:02:01,820 --> 00:02:03,040
in this method,

56
00:02:03,040 --> 00:02:04,570
because it's not a constant

57
00:02:04,570 --> 00:02:07,240
or variable that would be globally available

58
00:02:07,240 --> 00:02:10,240
in this block or in a surrounding block.

59
00:02:10,240 --> 00:02:11,073
Instead,

60
00:02:11,073 --> 00:02:15,103
title here really is just a property of this object.

61
00:02:16,140 --> 00:02:18,650
Now we also can't say job dot Title

62
00:02:18,650 --> 00:02:20,770
because the job is also,

63
00:02:20,770 --> 00:02:23,720
not a variable that doesn't exist here.

64
00:02:23,720 --> 00:02:25,462
And maybe with a capital J,

65
00:02:25,462 --> 00:02:27,138
then it would be a class,

66
00:02:27,138 --> 00:02:30,270
but the class is just a blueprint.

67
00:02:30,270 --> 00:02:32,680
Here I need the concrete title

68
00:02:32,680 --> 00:02:35,000
of an object based on that

69
00:02:35,000 --> 00:02:36,520
blueprint.

70
00:02:36,520 --> 00:02:38,423
So that's also not the solution.

71
00:02:39,440 --> 00:02:41,340
Instead it's again the this keyword

72
00:02:42,200 --> 00:02:43,220
in the constructor,

73
00:02:43,220 --> 00:02:47,250
we use the this key word to refer to the object

74
00:02:47,250 --> 00:02:49,528
That's about to be created.

75
00:02:49,528 --> 00:02:52,388
In all the other methods of this blueprint,

76
00:02:52,388 --> 00:02:54,360
We'd refer to the already

77
00:02:54,360 --> 00:02:55,193
created

78
00:02:55,193 --> 00:02:56,530
object.

79
00:02:56,530 --> 00:02:57,363
So this here,

80
00:02:57,363 --> 00:02:59,820
again refers to the object that

81
00:02:59,820 --> 00:03:00,653
was

82
00:03:00,653 --> 00:03:02,050
created,

83
00:03:02,050 --> 00:03:04,090
actually that this keyword can be

84
00:03:04,090 --> 00:03:05,771
a bit tricky in JavaScript,

85
00:03:05,771 --> 00:03:08,970
but in general, it works as I just described it.

86
00:03:08,970 --> 00:03:11,607
It allows you to refer to the object

87
00:03:11,607 --> 00:03:13,723
on which you call this method.

88
00:03:15,420 --> 00:03:16,253
So therefore,

89
00:03:16,253 --> 00:03:18,110
here we can then output this

90
00:03:18,110 --> 00:03:19,133
location.

91
00:03:20,390 --> 00:03:21,580
And then here at the end,

92
00:03:21,580 --> 00:03:24,173
we output this dot salary.

93
00:03:27,530 --> 00:03:28,510
And now with that,

94
00:03:28,510 --> 00:03:30,760
we're using the this keyword to refer to

95
00:03:30,760 --> 00:03:33,630
the different properties inside of this method,

96
00:03:33,630 --> 00:03:35,683
which also belongs to the blueprint.

97
00:03:36,620 --> 00:03:39,240
And since we defined this method in the blueprint,

98
00:03:39,240 --> 00:03:40,270
we can use it on

99
00:03:40,270 --> 00:03:41,900
all the objects we create based

100
00:03:41,900 --> 00:03:44,100
on the blueprint.

101
00:03:44,100 --> 00:03:47,280
So instead of console logging my developer like this,

102
00:03:47,280 --> 00:03:49,320
I can write developer,

103
00:03:49,320 --> 00:03:50,153
describe,

104
00:03:50,153 --> 00:03:52,260
and execute this method.

105
00:03:52,260 --> 00:03:55,203
And do the same for the cook and call describe.

106
00:03:56,570 --> 00:03:57,403
And that again,

107
00:03:57,403 --> 00:04:00,510
shows us why blueprints are useful if we create

108
00:04:00,510 --> 00:04:03,370
multiple objects of the same type,

109
00:04:03,370 --> 00:04:05,752
we only have to define the properties once.

110
00:04:05,752 --> 00:04:06,670
Now,

111
00:04:06,670 --> 00:04:09,260
we also only have to define our logic

112
00:04:09,260 --> 00:04:11,720
that belongs to this object once

113
00:04:11,720 --> 00:04:12,553
and still,

114
00:04:12,553 --> 00:04:14,100
we can then use this method on

115
00:04:14,100 --> 00:04:15,741
multiple different objects

116
00:04:15,741 --> 00:04:19,733
that were created based on the same blueprint.

117
00:04:21,870 --> 00:04:22,703
and there for,

118
00:04:22,703 --> 00:04:24,910
Of course, if I now execute this,

119
00:04:24,910 --> 00:04:27,490
I get the expected output where

120
00:04:27,490 --> 00:04:30,180
I have different values for title,

121
00:04:30,180 --> 00:04:31,013
place,

122
00:04:31,013 --> 00:04:33,793
and salary for the different objects.

123
00:04:35,850 --> 00:04:36,683
So

124
00:04:36,683 --> 00:04:40,080
classes are another feature that can be useful.

125
00:04:40,080 --> 00:04:42,260
Sometimes you create your own classes

126
00:04:42,260 --> 00:04:45,920
so that you have your own reusable blueprints.

127
00:04:45,920 --> 00:04:48,510
But very often you will also work with

128
00:04:48,510 --> 00:04:49,660
built in

129
00:04:49,660 --> 00:04:50,510
classes,

130
00:04:50,510 --> 00:04:52,230
Built in blueprints,

131
00:04:52,230 --> 00:04:55,600
that are either built into JavaScript itself,

132
00:04:55,600 --> 00:04:58,893
or that are provided by third-party packages.

133
00:04:59,730 --> 00:05:03,040
As all the concepts I explain in this module,

134
00:05:03,040 --> 00:05:04,830
we'll also see the new keyword

135
00:05:04,830 --> 00:05:07,010
and classes again later in the course.

136
00:05:07,010 --> 00:05:08,890
And it's now hopefully clear

137
00:05:08,890 --> 00:05:10,700
what the class keyword does

138
00:05:10,700 --> 00:05:12,290
and what the new keyword does

139
00:05:12,290 --> 00:05:14,780
and how the two concepts work together

140
00:05:14,780 --> 00:05:15,613
to allow

141
00:05:15,613 --> 00:05:16,446
you to create

142
00:05:16,446 --> 00:05:17,968
and use blueprints

143
00:05:17,968 --> 00:05:20,000
to then build objects

144
00:05:20,000 --> 00:05:21,573
based on these blueprints.