0
1
00:00:00,000 --> 00:00:02,701
Okay so in this video we're
going to talk about object
1

2
00:00:02,701 --> 00:00:06,861
oriented programming.
Technically I assume that you
2

3
00:00:06,861 --> 00:00:09,661
already know what this is but I
just want to give you a quick
3

4
00:00:09,661 --> 00:00:13,621
refresher because we're going
to do a lot of classes,
4

5
00:00:13,621 --> 00:00:18,461
objects, inheritance, things
like this so I think that a
5

6
00:00:18,461 --> 00:00:22,701
quick refresher can help. Okay?
So this will just be a quick
6

7
00:00:22,701 --> 00:00:26,141
refresher on the general
concept of object oriented
7

8
00:00:26,141 --> 00:00:30,221
programming. So just so you
know but before objected
8

9
00:00:30,221 --> 00:00:35,281
oriented programming I'm going
to say OOP from now. Um there
9

10
00:00:35,281 --> 00:00:38,321
was the procedural
programming and basically your
10

11
00:00:38,321 --> 00:00:42,561
program was just made out of a
lot of functions, and that's
11

12
00:00:42,561 --> 00:00:46,641
it just functions functions
functions and the problem is as
12

13
00:00:46,641 --> 00:00:50,081
it grow it gets hard to
maintain okay and you can
13

14
00:00:50,081 --> 00:00:53,681
rapidly end up having a lot of
functions that call other
14

15
00:00:53,681 --> 00:00:56,721
functions and you will end up
having a lot of
15

16
00:00:56,721 --> 00:01:00,001
interdependencies and you can
end up in what we call an anti
16

17
00:01:00,001 --> 00:01:04,301
pattern that is the spaghetti
code , so not cool and
17

18
00:01:04,301 --> 00:01:08,621
basically that is what the OOP
is going to try to solve okay
18

19
00:01:08,621 --> 00:01:12,541
so the OOP is not going to make
you code faster or something
19

20
00:01:12,541 --> 00:01:15,501
like this it's going just going
to make it easier to maintain
20

21
00:01:15,501 --> 00:01:19,741
easier to manipulate because
it's more a human approach
21

22
00:01:19,741 --> 00:01:24,221
because we are going to create
objects like for example a car
22

23
00:01:24,221 --> 00:01:28,221
it's easier to to to visualize
to picture what a car is and
23

24
00:01:28,221 --> 00:01:31,101
when you think a car you may
think okay that's something
24

25
00:01:31,101 --> 00:01:35,081
that has four wheels that can
move and that could be
25

26
00:01:35,081 --> 00:01:38,521
translated into a class and an
object and that's what the OOP
26

27
00:01:38,521 --> 00:01:42,201
is about. So for example a
program is now going to be made
27

28
00:01:42,201 --> 00:01:46,921
out of class methods and
properties. So for example a
28

29
00:01:46,921 --> 00:01:50,361
class would be what we call an
object in general so it's a
29

30
00:01:50,361 --> 00:01:52,841
class and a class contains
methods and properties so
30

31
00:01:52,841 --> 00:01:55,641
methods that aren't just
basically functions that runs
31

32
00:01:55,641 --> 00:01:59,721
on code and that can access the
properties of the class and use
32

33
00:01:59,721 --> 00:02:02,681
them if they want. So
properties just basically a
33

34
00:02:02,681 --> 00:02:07,061
value okay it can be a number a
string an array or something
34

35
00:02:07,061 --> 00:02:11,541
more complex and you can have a
lot of classes in your program
35

36
00:02:11,541 --> 00:02:14,581
and then can communicate
between each other or just
36

37
00:02:14,581 --> 00:02:18,501
communicate with themselves
only okay and you can use them
37

38
00:02:18,501 --> 00:02:22,501
as the like they were a single
piece of information so for
38

39
00:02:22,501 --> 00:02:25,221
example the most typical
example is a car like I told
39

40
00:02:25,221 --> 00:02:28,981
you and a car could have several
methods like start accelerate
40

41
00:02:28,981 --> 00:02:32,961
decelerate stop and so on and
you could have some properties
41

42
00:02:32,961 --> 00:02:37,281
inside for example a color for
the car or a model okay for the
42

43
00:02:37,281 --> 00:02:41,841
car now in term of code in
general okay it's not specific
43

44
00:02:41,841 --> 00:02:46,001
to type script but in general
that is the basic structure of
44

45
00:02:46,001 --> 00:02:50,001
a class okay a class just have
a name and then inside you're
45

46
00:02:50,001 --> 00:02:52,641
going to have all your
attributes in general at the
46

47
00:02:52,641 --> 00:02:56,161
top and below that you're going
to have all your methods all
47

48
00:02:56,161 --> 00:03:00,081
your the function of the class
okay now you may think okay
48

49
00:03:00,081 --> 00:03:04,721
cool I have a class I have a
car so the class is kind of the
49

50
00:03:04,721 --> 00:03:09,041
recipe for how the object is
going to work how the car is
50

51
00:03:09,041 --> 00:03:12,561
going to work but maybe you
want to create an actual car
51

52
00:03:12,561 --> 00:03:17,121
build it okay and we call that
create an instance out of a
52

53
00:03:17,121 --> 00:03:20,721
class so for example let's say
we have this kind of model for
53

54
00:03:20,721 --> 00:03:25,441
the car we have so this class
okay this recipe and as you can
54

55
00:03:25,441 --> 00:03:30,081
see here I have set a car and a
model inside my class so a car
55

56
00:03:30,081 --> 00:03:34,081
will always be blue and it will
always be a Tesla for now and
56

57
00:03:34,081 --> 00:03:38,021
if I want to read create this
blue Tesla I will have to use
57

58
00:03:38,021 --> 00:03:41,461
the syntax. I will just to use
the new keyword and create a
58

59
00:03:41,461 --> 00:03:45,061
car like this. And then I can
start the result in a variable.
59

60
00:03:45,061 --> 00:03:49,381
Now inside I really have an
instance of the class. I I
60

61
00:03:49,381 --> 00:03:53,141
really have a card they can
use. So I can do my car.
61

62
00:03:53,141 --> 00:03:56,341
start or my car.accelerate
or I can even access
62

63
00:03:56,341 --> 00:04:00,421
the properties of my class if I
want. By calling them by their
63

64
00:04:00,421 --> 00:04:03,941
name. And that's it. So pretty
cool but in general you don't
64

65
00:04:03,941 --> 00:04:06,801
really have a car in your
program so I'm going to give
65

66
00:04:06,801 --> 00:04:10,001
you a real example maybe you
have already used it so for
66

67
00:04:10,001 --> 00:04:14,481
example if you go on in your
browser for example on Google
67

68
00:04:14,481 --> 00:04:18,481
you can use an object that is a
very famous one and it's a
68

69
00:04:18,481 --> 00:04:22,001
local storage so behind the
scene this is a class this is
69

70
00:04:22,001 --> 00:04:25,281
an object that has been
instantiated already and you
70

71
00:04:25,281 --> 00:04:29,921
can use it to store information
for this very specific website
71

72
00:04:29,921 --> 00:04:34,221
in your browser and so on this
object I can use the set item
72

73
00:04:34,221 --> 00:04:37,661
method to store an information
for this very specific website
73

74
00:04:37,661 --> 00:04:41,101
and so you have to define a key
so that's the first parameter
74

75
00:04:41,101 --> 00:04:45,501
and you can send then a value
so for example my value like
75

76
00:04:45,501 --> 00:04:48,701
this and when I'm going to do
that it's going to be stored in
76

77
00:04:48,701 --> 00:04:51,941
a browser for this very
specific web page so Google.
77

78
00:04:51,941 --> 00:04:57,181
com and the cool thing is that
now if I refresh now I can do a
78

79
00:04:57,181 --> 00:05:04,461
local storage.getItem and
this time I can send my key the
79

80
00:05:04,461 --> 00:05:07,901
key that I've used previously
to retrieve my value and it's
80

81
00:05:07,901 --> 00:05:11,841
always going to even if I
refresh my page. Okay? So
81

82
00:05:11,841 --> 00:05:15,761
behind the scene local storage
is an actual object, okay? Um
82

83
00:05:15,761 --> 00:05:21,601
and it also have properties,
okay? For example .length, it's
83

84
00:05:21,601 --> 00:05:24,561
not a method, it's not a
function, but it's going to
84

85
00:05:24,561 --> 00:05:28,961
return value. So that's a class
that you are maybe have already
85

86
00:05:28,961 --> 00:05:36,321
used. So let's go back to our
class. So now that's cool, we
86

87
00:05:36,321 --> 00:05:40,821
have a blue Tesla, that's nice,
but maybe you want a red
87

88
00:05:40,821 --> 00:05:44,101
Mustang okay and so for now
well anytime you're going to
88

89
00:05:44,101 --> 00:05:49,221
create a car it's always going
to be a blue Tesla so maybe you
89

90
00:05:49,221 --> 00:05:52,261
want when you create your car
to be able to send arguments to
90

91
00:05:52,261 --> 00:05:56,261
this class so it will be
initialized with all values so
91

92
00:05:56,261 --> 00:06:00,021
to do that you have to use a
very specific method of a class
92

93
00:06:00,021 --> 00:06:05,221
that exist for all the classes
that you can redefine and so by
93

94
00:06:05,221 --> 00:06:07,381
default it's not going to do
anything it's called
94

95
00:06:07,381 --> 00:06:11,941
constructor that is an hidden
method of a class by default
95

96
00:06:11,941 --> 00:06:15,141
it's a function that does
nothing but you can add things
96

97
00:06:15,141 --> 00:06:19,061
in it for example let's say we
have this car model and we want
97

98
00:06:19,061 --> 00:06:23,301
like I told you send a red
Mustang to this new car okay
98

99
00:06:23,301 --> 00:06:25,701
when you're doing that you're
actually calling the
99

100
00:06:25,701 --> 00:06:30,581
constructor so now in my class
here I can actually define a
100

101
00:06:30,581 --> 00:06:34,101
constructor and say that I
expect to receive two values
101

102
00:06:34,101 --> 00:06:38,661
for example a car and a model
and then I'm going to use for
102

103
00:06:38,661 --> 00:06:45,481
example this color here to fill
my car property, and so since
103

104
00:06:45,481 --> 00:06:49,801
they have the same name you can
use the this dot keyword to
104

105
00:06:49,801 --> 00:06:53,881
really explicitly tell that you
want to target what is owned by
105

106
00:06:53,881 --> 00:06:57,401
the class so this is the color
owned by the class okay this is
106

107
00:06:57,401 --> 00:07:01,081
not an external color this is
an external color it comes from
107

108
00:07:01,081 --> 00:07:05,081
the outside okay so when you
use the this dot keyword you're
108

109
00:07:05,081 --> 00:07:08,361
actually explicitly telling
that you want to target
109

110
00:07:08,361 --> 00:07:12,361
something that is owned by the
class so you can do this.
110

111
00:07:12,361 --> 00:07:17,361
color this.dot model or even
this.start or this.stop
111

112
00:07:17,361 --> 00:07:21,681
anything that is attached to
the class. All right? So this
112

113
00:07:21,681 --> 00:07:27,121
means it's in the class. And
now if you log myMUstand dot
113

114
00:07:27,121 --> 00:07:30,801
color after initializing it
like this you should have "red"
114

115
00:07:30,801 --> 00:07:35,441
returned because now this dot
color is equal to red. All
115

116
00:07:35,441 --> 00:07:38,401
right? So that's pretty much it
about the object oriented
116

117
00:07:38,401 --> 00:07:41,361
programming. Okay? Uh obviously
there are a lot of other thing
117

118
00:07:41,361 --> 00:07:45,441
that we have to talk about like
inheritance like abstractions,
118

119
00:07:45,441 --> 00:07:47,921
a lot of other concepts, but
actually we're going to use
119

120
00:07:47,921 --> 00:07:50,721
them during the course and I
will re explain how they are working
120

121
00:07:50,721 --> 00:07:55,681
so this should help you. All
right? So yeah that's pretty
121

122
00:07:55,681 --> 00:07:58,001
much it for this quick
refresher. I hope it was clear
122

123
00:07:58,001 --> 00:08:01,521
and see you on the next one.