1
00:00:01,090 --> 00:00:05,630
In this video I want to talk about composition versus inheritance just a little bit more.

2
00:00:05,650 --> 00:00:09,760
This discussion is going to be kind of unrelated to the application that we're working on.

3
00:00:09,820 --> 00:00:14,860
Nonetheless this feels like a really great opportunity for me to clear up some confusion between composition

4
00:00:14,860 --> 00:00:16,890
and inheritance in the javascript community.

5
00:00:17,140 --> 00:00:21,160
So feel free to skip this lecture if you want but I highly recommend that you stick around because it's

6
00:00:21,160 --> 00:00:26,190
gonna help you understand that there really is a huge misconception around composition.

7
00:00:26,230 --> 00:00:26,430
All right.

8
00:00:26,440 --> 00:00:27,070
Let's get started.

9
00:00:27,070 --> 00:00:28,040
First things first.

10
00:00:28,150 --> 00:00:32,800
If you've ever read a blog post around object composition verse inheritance you might have seen this

11
00:00:32,860 --> 00:00:34,120
exact quote right here.

12
00:00:34,120 --> 00:00:38,290
It says favorite object composition over class inheritance.

13
00:00:38,320 --> 00:00:40,930
So this is from a book that was written many years ago.

14
00:00:40,960 --> 00:00:44,130
The book was not specifically about JavaScript.

15
00:00:44,140 --> 00:00:46,820
The book was actually written for I believe C++.

16
00:00:46,960 --> 00:00:52,330
Nonetheless people have kind of latched onto this phrase in the javascript community and used it as

17
00:00:52,330 --> 00:00:56,960
like a selling post for saying hey we should favor object composition.

18
00:00:56,970 --> 00:00:57,870
Well here's the issue.

19
00:00:58,050 --> 00:01:03,770
It turns out that's probably the most misunderstood statement ever in the javascript community.

20
00:01:03,850 --> 00:01:10,230
Now the statement itself is correct the statements itself the authors go on and give a very strong argument

21
00:01:10,230 --> 00:01:12,990
for saying that we should favor object composition.

22
00:01:12,990 --> 00:01:18,900
The issue is that if you go onto Google right now and you search for JavaScript composition versus inheritance

23
00:01:18,930 --> 00:01:23,850
and you look at all these different blog posts all these different videos if you read them you're going

24
00:01:23,850 --> 00:01:33,100
to find that their definition of composition is 100 percent incorrect so maybe composition versus inheritance

25
00:01:33,100 --> 00:01:34,720
is like some debatable topic.

26
00:01:34,720 --> 00:01:41,830
The issue is that everyone's understanding of the word composition in the jobs great world is just plain

27
00:01:41,920 --> 00:01:43,380
wrong.

28
00:01:43,390 --> 00:01:48,340
So my goal here in this video is to help you understand what the authors of the book we're talking about

29
00:01:48,370 --> 00:01:52,750
when they use that statement and what the people who are writing all these blog posts are talking about

30
00:01:52,750 --> 00:01:54,740
when they discuss composition.

31
00:01:55,030 --> 00:01:58,960
And my goal here is not to like shame anyone in a javascript community that's not what I'm trying to

32
00:01:58,960 --> 00:01:59,440
do.

33
00:01:59,680 --> 00:02:03,120
I'm trying to do is make it really clear that hey we really messed it up.

34
00:02:03,130 --> 00:02:08,590
Our definition of composition and it's really important for us to correct that understanding and correct

35
00:02:08,590 --> 00:02:13,570
that definition because otherwise we got tons and tons of engineers who are going to be writing really

36
00:02:13,570 --> 00:02:19,290
really weird code because they think that these authors like the authors of this book that we're gonna

37
00:02:19,300 --> 00:02:24,810
take a look at we're saying one thing when in fact they were saying a very different other thing.

38
00:02:24,960 --> 00:02:25,190
OK.

39
00:02:25,190 --> 00:02:25,740
So let's get to it.

40
00:02:25,750 --> 00:02:27,310
Let's first take a look at the book.

41
00:02:27,430 --> 00:02:30,810
We're going to understand their definition of composition.

42
00:02:30,850 --> 00:02:32,230
We're then going to look at a blog post.

43
00:02:32,350 --> 00:02:36,940
Understand the blog post definition of composition and compare and contrast the two and I think you'll

44
00:02:36,940 --> 00:02:42,560
find that they are very very very definite different definitions of composition.

45
00:02:42,610 --> 00:02:42,790
All right.

46
00:02:42,790 --> 00:02:45,990
So inside a design patterns again this book was written many years ago.

47
00:02:46,060 --> 00:02:48,590
It was not written specifically for JavaScript.

48
00:02:48,670 --> 00:02:52,670
I'm gonna go down to you I think it's page 40 or so.

49
00:02:52,700 --> 00:02:53,330
Here we go.

50
00:02:53,330 --> 00:02:53,540
All right.

51
00:02:53,540 --> 00:02:58,880
Page forty says you're very clearly favor object composition over class inheritance and again this is

52
00:02:58,880 --> 00:03:03,120
the phrase that gets repeated over and over and over again.

53
00:03:03,140 --> 00:03:08,050
So let's take a look at this book's definition of what composition is.

54
00:03:08,280 --> 00:03:09,600
We're going to scroll down just a little bit.

55
00:03:09,600 --> 00:03:10,970
You can read this stuff right here.

56
00:03:10,980 --> 00:03:14,850
But it doesn't really tell us a whole bunch beyond just what that sentence says.

57
00:03:14,850 --> 00:03:21,000
So the next section is about delegation and they're saying the delegation pattern is one way of making

58
00:03:21,000 --> 00:03:23,590
composition a very strong pattern.

59
00:03:23,640 --> 00:03:28,860
So tell it is kind of like a tool or a method of implementing composition.

60
00:03:28,920 --> 00:03:35,770
They then go on to describe exactly how delegation works so let's take a look at their example of how

61
00:03:35,770 --> 00:03:36,790
the delegation works right here.

62
00:03:36,790 --> 00:03:40,570
They're saying there you notice how they're using the exact same example I just gave you.

63
00:03:40,600 --> 00:03:46,300
They're saying instead of making window a subclass of rectangle just because the window happens to be

64
00:03:46,300 --> 00:03:51,320
rectangular the window class might instead reuse the rectangle by.

65
00:03:51,450 --> 00:03:52,500
And here's the important part.

66
00:03:52,510 --> 00:03:54,430
Here's the super important part.

67
00:03:54,430 --> 00:04:01,840
Keeping a reference to the rectangle instance variable and delegating rectangle specific behavior to

68
00:04:01,840 --> 00:04:02,620
it.

69
00:04:02,620 --> 00:04:06,790
So in other words instead of a window being a rectangular it should have a.

70
00:04:06,810 --> 00:04:08,430
That's the has a relationship.

71
00:04:08,430 --> 00:04:09,850
You were just talking about.

72
00:04:09,850 --> 00:04:13,270
So a window should have a reference to a rectangle.

73
00:04:13,400 --> 00:04:20,680
And that's example we just looked at two seconds ago with that diagram right here Oh no not that one.

74
00:04:20,690 --> 00:04:28,700
This one right here so we said that a window should have a reference to a rectangle or generally to

75
00:04:28,700 --> 00:04:34,940
some kind of like shape object and we can easily swap that object out and that's how we get code reuse.

76
00:04:35,000 --> 00:04:40,340
So when the book talks about composition they're saying very specifically.

77
00:04:40,370 --> 00:04:47,300
All right we're going to favor delegation as a pattern to implement composition with this pattern.

78
00:04:47,300 --> 00:04:53,570
We have some class that has a reference to another object and anytime some request comes into like get

79
00:04:53,570 --> 00:04:59,900
the area of the window or window class is going to delegate that that calculation off to this dimensions

80
00:04:59,930 --> 00:05:02,420
object or to that outside object.

81
00:05:02,420 --> 00:05:06,950
So that is what the book is saying when it talks about composition.

82
00:05:06,980 --> 00:05:08,180
So now we understand that.

83
00:05:08,180 --> 00:05:13,610
Let's take a look at one these random blog post online and we'll try to understand what all these different

84
00:05:13,610 --> 00:05:15,400
blog posts are saying around composition.

85
00:05:15,410 --> 00:05:20,040
And again just about every single one of these blog posts not correct.

86
00:05:20,050 --> 00:05:20,360
OK.

87
00:05:20,390 --> 00:05:25,730
Now I pulled up one of these blog posts I deleted as much identifying information out of it as I can

88
00:05:26,170 --> 00:05:29,090
because again I'm not trying to shame anyone here or anything like that.

89
00:05:29,150 --> 00:05:37,050
I just want to clarify this misunderstanding let's take a look at what their claim of composition is

90
00:05:38,480 --> 00:05:43,370
so in this example they're creating a function down here called wider then inside of fighter whenever

91
00:05:43,370 --> 00:05:48,320
they call it they're going to create an object that they called state and state has some different properties

92
00:05:48,320 --> 00:05:54,360
that describe a fighter now a fighter needs to have some number of methods attached to it to actually

93
00:05:54,360 --> 00:05:56,210
make this object useful.

94
00:05:56,220 --> 00:06:01,740
So right here they're saying object assign object assign is going to take all the different properties

95
00:06:02,040 --> 00:06:06,940
out of this object and essentially copy paste them over to this object.

96
00:06:07,020 --> 00:06:10,010
Now does that phrase copy paste ring a bell.

97
00:06:10,020 --> 00:06:11,290
Does that not sound.

98
00:06:11,400 --> 00:06:16,080
I don't know kind of a lot like something we were talking about earlier in the course called inheritance.

99
00:06:16,110 --> 00:06:16,420
Yeah.

100
00:06:16,470 --> 00:06:18,700
It kind of does just keep in mind for a second.

101
00:06:18,840 --> 00:06:21,680
So obviously we need to understand what can't fight does right here.

102
00:06:21,840 --> 00:06:23,400
Can't fight is defined right here.

103
00:06:23,460 --> 00:06:28,560
So they pass in that state object that has all their kind of instance variables tied to it and then

104
00:06:28,560 --> 00:06:33,540
inside of can't fight all they're doing is returning an object that has some different methods attached

105
00:06:33,540 --> 00:06:34,240
to it.

106
00:06:34,320 --> 00:06:39,570
And the idea is that these methods right here are going to attempt to work on those instance properties

107
00:06:39,570 --> 00:06:43,390
like name or stamina or health and so on.

108
00:06:43,470 --> 00:06:48,990
So when these authors of these blog posts are talking about composition they're using the like the literal

109
00:06:48,990 --> 00:06:53,940
definition of composition in the dictionary in like an English dictionary they're saying oh yeah we're

110
00:06:53,940 --> 00:06:59,730
using composition because we have the ability to kind of build up an object by composing it from multiple

111
00:06:59,730 --> 00:07:01,930
different sources of methods.

112
00:07:02,010 --> 00:07:02,580
So yeah.

113
00:07:02,610 --> 00:07:06,330
Like the word composition in the absolute sense of the English language.

114
00:07:06,330 --> 00:07:06,650
Sure.

115
00:07:06,660 --> 00:07:07,810
I can buy that.

116
00:07:08,010 --> 00:07:16,040
But the issue is that when they are quoting the book that says favor composition over class inheritance.

117
00:07:16,040 --> 00:07:19,430
This is not it's two different types of composition in the book.

118
00:07:19,430 --> 00:07:25,490
Composition means one object has a reference to another object or possibly multiple other objects.

119
00:07:25,610 --> 00:07:31,490
All these blog posts are saying let's build up the definition of an object by using different sets of

120
00:07:31,490 --> 00:07:35,870
methods and to make sure that you really understand what these blog posts are saying let's write out

121
00:07:35,900 --> 00:07:40,710
a really quick example to try to emulate how we would build up the definition of a window.

122
00:07:40,880 --> 00:07:45,290
We're going to write out this example using JavaScript because to be honest it's just about impossible

123
00:07:45,290 --> 00:07:48,080
to implement using typescript.

124
00:07:48,080 --> 00:07:48,360
All right.

125
00:07:48,470 --> 00:07:53,060
Pull open a quick type or semi quick javascript editor here inside my browser if you want to write out

126
00:07:53,060 --> 00:07:59,230
this code as well you can go to Steven Greider dot get hub dot Io slash playgrounds all right so as

127
00:07:59,230 --> 00:08:04,110
a code editor on the left hand side we can write out some stuff and the result of it will just be printed

128
00:08:04,130 --> 00:08:05,290
Emily on the right hand side.

129
00:08:05,290 --> 00:08:07,940
So just a really quick place to write out an example.

130
00:08:08,090 --> 00:08:13,040
I'm going to follow the same pattern we just saw on that blog post I'm going to create a function here

131
00:08:14,850 --> 00:08:21,980
called rectangular and the goal this function is to take in some state object that remember has some

132
00:08:21,980 --> 00:08:26,840
like instance variables tied to it and then we're going to return an object that has some methods that

133
00:08:26,840 --> 00:08:30,790
I want to eventually use in some definition of something that is rectangular.

134
00:08:30,890 --> 00:08:34,850
So if something is rectangular chances are we want it to have like an area method right yeah that makes

135
00:08:34,850 --> 00:08:35,710
sense.

136
00:08:35,870 --> 00:08:38,060
So I'll give it an area method inside of here.

137
00:08:38,060 --> 00:08:44,840
I will return state DOT height time state DOT width so I'm very clearly kind of making the implication

138
00:08:44,840 --> 00:08:50,850
here that this state object that's coming in must have a height NDA with proper state property after

139
00:08:50,850 --> 00:08:51,090
that.

140
00:08:51,120 --> 00:08:58,150
I'll define maybe you like some OpenTable function and the goal of this is to give a door presumably

141
00:08:58,360 --> 00:09:00,580
the ability to toggle itself open or close.

142
00:09:01,110 --> 00:09:05,200
So I'm going to return an object that has methods to implement that behavior.

143
00:09:05,410 --> 00:09:07,480
So I'll give it a method like toggle open

144
00:09:10,660 --> 00:09:16,090
and inside of here I'll say state DOT open is the opposite of state DOT open so that's definitely some

145
00:09:16,090 --> 00:09:17,500
like toggling behavior right there.

146
00:09:18,550 --> 00:09:23,710
So now here's the important part to combine these behaviors together are kind of like compose them so

147
00:09:23,710 --> 00:09:30,430
to speak into an object we would write a single function down here called like build rectangle window

148
00:09:31,510 --> 00:09:38,160
that's going to be called with some state object now this example is slightly different than the blog

149
00:09:38,160 --> 00:09:39,210
post we just looked at.

150
00:09:39,360 --> 00:09:43,560
In the example we just looked at they defined that state object directly inside of this function that

151
00:09:43,560 --> 00:09:46,540
was intended to actually build an instance of an object.

152
00:09:46,590 --> 00:09:51,030
We're going to say we're going to pass in those instance properties as an argument because that's way

153
00:09:51,030 --> 00:09:55,030
more flexible than what that example had that we're just looking at.

154
00:09:55,030 --> 00:10:04,050
All right so then inside of here we'll say return object dot assign state rectangular with state and

155
00:10:04,140 --> 00:10:06,730
open a bowl with state.

156
00:10:06,780 --> 00:10:11,160
Now the code here is just a little bit confusing remember it's not super critical for you to understand

157
00:10:11,160 --> 00:10:12,600
exactly what's happening here.

158
00:10:12,630 --> 00:10:18,750
We're basically saying take the state object throw it into OpenTable when we call OpenTable it's going

159
00:10:18,750 --> 00:10:25,360
to return an object that has some methods on it then take the state object and throw it into rectangular.

160
00:10:25,360 --> 00:10:29,350
That is also Whoops I've flipped switch OpenTable in rectangular but you get the idea.

161
00:10:29,380 --> 00:10:31,510
So return an object that has some methods on it.

162
00:10:31,540 --> 00:10:35,520
So essentially this right here is going to turn into an object that has some methods.

163
00:10:35,560 --> 00:10:39,340
This is going to turn into an object that has some methods and we're going to take all those different

164
00:10:39,340 --> 00:10:42,730
methods and copy paste them down to the state object.

165
00:10:42,860 --> 00:10:49,240
So now to actually create a rectangular window we would say something like rectangle window is build

166
00:10:50,720 --> 00:10:53,720
rectangle window and we'll pass in our state object.

167
00:10:53,720 --> 00:11:02,210
So this would presumably have like a height property a width and some like open state that we'll start

168
00:11:02,210 --> 00:11:03,920
off as false.

169
00:11:03,920 --> 00:11:08,180
So now to actually use this object like this is the actual instance of the object we care about.

170
00:11:08,180 --> 00:11:14,740
We could do things like say rectangle window not open to see whether or not the window is open or not.

171
00:11:14,740 --> 00:11:16,630
And that is we get false as the output.

172
00:11:16,820 --> 00:11:24,560
So then we could call rectangle window dot toggle open that should toggle the open status.

173
00:11:24,560 --> 00:11:26,790
Then we can print out rectangle window again.

174
00:11:26,960 --> 00:11:28,610
You'll see that now it's open.

175
00:11:28,680 --> 00:11:34,040
So again the entire idea behind this approach is that we have these kind of separate definitions of

176
00:11:34,040 --> 00:11:39,930
methods and we're going to combine them together to actually build a usable object so when all these

177
00:11:39,930 --> 00:11:42,950
blog posts are using the term composition again.

178
00:11:43,080 --> 00:11:49,590
Yeah sure I can buy that this is some form of composition in the strictest sense of the a literal English

179
00:11:49,590 --> 00:11:55,050
definition of composition because we are composing the behaviours of an object by combining them together.

180
00:11:55,170 --> 00:12:02,760
But the big point here is that this is just plain not the same definition of composition as you find

181
00:12:02,850 --> 00:12:03,850
in this book.

182
00:12:03,990 --> 00:12:10,260
And this quote right here is what everyone is quoting these authors were some very very very smart people

183
00:12:10,470 --> 00:12:16,830
said you you should use this pattern right here overclass inheritance and we've got all these authors

184
00:12:16,830 --> 00:12:22,050
who are writing blog posts who are saying oh when they said composition they're saying this thing and

185
00:12:22,200 --> 00:12:26,430
what they're saying just not what the authors of this book are talking about.

186
00:12:27,120 --> 00:12:27,900
So again.

187
00:12:28,110 --> 00:12:32,700
Yeah sure I can buy that it's called Composition and that's really where the confusion comes from but

188
00:12:32,700 --> 00:12:34,610
it's not the same composition.

189
00:12:34,620 --> 00:12:39,840
And so the authors are not saying the authors of this book right here are not saying to do this this

190
00:12:39,840 --> 00:12:44,010
is not what we want to do this is just plain not a good pattern.

191
00:12:44,130 --> 00:12:47,250
And I can show you why this is not a good pattern very very easily.

192
00:12:47,250 --> 00:12:51,240
Let's say for some reason OpenTable right here also has an area method

193
00:12:54,040 --> 00:12:54,720
right.

194
00:12:54,730 --> 00:12:56,070
OK well what does that mean.

195
00:12:56,110 --> 00:13:02,800
That means that when we have some object that combines the methods from rectangular and OpenTable which

196
00:13:02,830 --> 00:13:07,460
area method are we going to actually get the area method that we end up getting here.

197
00:13:07,480 --> 00:13:12,730
Just comes down to the order in which we list them out in the object a signed statement.

198
00:13:12,730 --> 00:13:16,110
So this entire pattern right here is incredibly fragile.

199
00:13:16,180 --> 00:13:21,210
If you ever happen to have any methods with the same name if you ever do that's pretty much it.

200
00:13:21,220 --> 00:13:25,690
You can't combine those different sets of methods together because you're going to very quickly get

201
00:13:25,690 --> 00:13:32,040
some super unexpected behavior this entire pattern that you're seeing here some of these blog post authors

202
00:13:32,040 --> 00:13:36,720
are calling it like concatenate of inheritance or something like that or concatenate composition I think

203
00:13:37,260 --> 00:13:42,210
as kind of like an alternate definition what it's really called is multiple inheritance.

204
00:13:42,210 --> 00:13:43,950
That's what we are really doing here.

205
00:13:44,040 --> 00:13:49,530
So we're building up the definition of some like rectangle window thing by combining all the different

206
00:13:49,530 --> 00:13:52,960
methods from something that is OpenTable and rectangular.

207
00:13:53,010 --> 00:13:58,530
You can kind of imagine that Yup we're going to copy paste literally copy paste in this case all those

208
00:13:58,530 --> 00:14:03,840
methods and all these methods down to rectangle window.

209
00:14:03,840 --> 00:14:07,830
And remember once again earlier on in this course copy paste methods.

210
00:14:07,840 --> 00:14:10,260
Gee that sounds an awful like inheritance.

211
00:14:10,260 --> 00:14:15,690
That's exactly what the blog post authors are advocating it is multiple inheritance that they are showing

212
00:14:15,690 --> 00:14:20,790
here they are inheriting methods from multiple different sources.

213
00:14:20,820 --> 00:14:21,480
I think that's enough.

214
00:14:21,480 --> 00:14:26,910
I think you get the idea of where I'm coming from here again so much of these community can produced

215
00:14:27,240 --> 00:14:32,360
articles around composition are just really off in left field on this topic.

216
00:14:32,400 --> 00:14:36,630
So hopefully this gives you a better idea of what these book authors were talking about when they were

217
00:14:36,630 --> 00:14:38,610
discussing object composition.

218
00:14:38,610 --> 00:14:43,170
So in this course we're going to stick to like the book definition of object composition as much as

219
00:14:43,170 --> 00:14:44,370
we possibly can.

220
00:14:44,400 --> 00:14:49,620
We're still going to look at some examples of class inheritance just you get an even balance of both

221
00:14:49,620 --> 00:14:51,090
approaches.

222
00:14:51,120 --> 00:14:51,340
OK.

223
00:14:51,360 --> 00:14:52,560
So like I said that's enough.

224
00:14:52,560 --> 00:14:55,320
Let's take a quick pause right here and we'll continue in the next video.