In this video I want to talk about composition versus inheritance just a little bit more.
This discussion is going to be kind of unrelated to the application that we're working on.
Nonetheless this feels like a really great opportunity for me to clear up some confusion between composition
and inheritance in the javascript community.
So feel free to skip this lecture if you want but I highly recommend that you stick around because it's
gonna help you understand that there really is a huge misconception around composition.
All right.
Let's get started.
First things first.
If you've ever read a blog post around object composition verse inheritance you might have seen this
exact quote right here.
It says favorite object composition over class inheritance.
So this is from a book that was written many years ago.
The book was not specifically about JavaScript.
The book was actually written for I believe C++.
Nonetheless people have kind of latched onto this phrase in the javascript community and used it as
like a selling post for saying hey we should favor object composition.
Well here's the issue.
It turns out that's probably the most misunderstood statement ever in the javascript community.
Now the statement itself is correct the statements itself the authors go on and give a very strong argument
for saying that we should favor object composition.
The issue is that if you go onto Google right now and you search for JavaScript composition versus inheritance
and you look at all these different blog posts all these different videos if you read them you're going
to find that their definition of composition is 100 percent incorrect so maybe composition versus inheritance
is like some debatable topic.
The issue is that everyone's understanding of the word composition in the jobs great world is just plain
wrong.
So my goal here in this video is to help you understand what the authors of the book we're talking about
when they use that statement and what the people who are writing all these blog posts are talking about
when they discuss composition.
And my goal here is not to like shame anyone in a javascript community that's not what I'm trying to
do.
I'm trying to do is make it really clear that hey we really messed it up.
Our definition of composition and it's really important for us to correct that understanding and correct
that definition because otherwise we got tons and tons of engineers who are going to be writing really
really weird code because they think that these authors like the authors of this book that we're gonna
take a look at we're saying one thing when in fact they were saying a very different other thing.
OK.
So let's get to it.
Let's first take a look at the book.
We're going to understand their definition of composition.
We're then going to look at a blog post.
Understand the blog post definition of composition and compare and contrast the two and I think you'll
find that they are very very very definite different definitions of composition.
All right.
So inside a design patterns again this book was written many years ago.
It was not written specifically for JavaScript.
I'm gonna go down to you I think it's page 40 or so.
Here we go.
All right.
Page forty says you're very clearly favor object composition over class inheritance and again this is
the phrase that gets repeated over and over and over again.
So let's take a look at this book's definition of what composition is.
We're going to scroll down just a little bit.
You can read this stuff right here.
But it doesn't really tell us a whole bunch beyond just what that sentence says.
So the next section is about delegation and they're saying the delegation pattern is one way of making
composition a very strong pattern.
So tell it is kind of like a tool or a method of implementing composition.
They then go on to describe exactly how delegation works so let's take a look at their example of how
the delegation works right here.
They're saying there you notice how they're using the exact same example I just gave you.
They're saying instead of making window a subclass of rectangle just because the window happens to be
rectangular the window class might instead reuse the rectangle by.
And here's the important part.
Here's the super important part.
Keeping a reference to the rectangle instance variable and delegating rectangle specific behavior to
it.
So in other words instead of a window being a rectangular it should have a.
That's the has a relationship.
You were just talking about.
So a window should have a reference to a rectangle.
And that's example we just looked at two seconds ago with that diagram right here Oh no not that one.
This one right here so we said that a window should have a reference to a rectangle or generally to
some kind of like shape object and we can easily swap that object out and that's how we get code reuse.
So when the book talks about composition they're saying very specifically.
All right we're going to favor delegation as a pattern to implement composition with this pattern.
We have some class that has a reference to another object and anytime some request comes into like get
the area of the window or window class is going to delegate that that calculation off to this dimensions
object or to that outside object.
So that is what the book is saying when it talks about composition.
So now we understand that.
Let's take a look at one these random blog post online and we'll try to understand what all these different
blog posts are saying around composition.
And again just about every single one of these blog posts not correct.
OK.
Now I pulled up one of these blog posts I deleted as much identifying information out of it as I can
because again I'm not trying to shame anyone here or anything like that.
I just want to clarify this misunderstanding let's take a look at what their claim of composition is
so in this example they're creating a function down here called wider then inside of fighter whenever
they call it they're going to create an object that they called state and state has some different properties
that describe a fighter now a fighter needs to have some number of methods attached to it to actually
make this object useful.
So right here they're saying object assign object assign is going to take all the different properties
out of this object and essentially copy paste them over to this object.
Now does that phrase copy paste ring a bell.
Does that not sound.
I don't know kind of a lot like something we were talking about earlier in the course called inheritance.
Yeah.
It kind of does just keep in mind for a second.
So obviously we need to understand what can't fight does right here.
Can't fight is defined right here.
So they pass in that state object that has all their kind of instance variables tied to it and then
inside of can't fight all they're doing is returning an object that has some different methods attached
to it.
And the idea is that these methods right here are going to attempt to work on those instance properties
like name or stamina or health and so on.
So when these authors of these blog posts are talking about composition they're using the like the literal
definition of composition in the dictionary in like an English dictionary they're saying oh yeah we're
using composition because we have the ability to kind of build up an object by composing it from multiple
different sources of methods.
So yeah.
Like the word composition in the absolute sense of the English language.
Sure.
I can buy that.
But the issue is that when they are quoting the book that says favor composition over class inheritance.
This is not it's two different types of composition in the book.
Composition means one object has a reference to another object or possibly multiple other objects.
All these blog posts are saying let's build up the definition of an object by using different sets of
methods and to make sure that you really understand what these blog posts are saying let's write out
a really quick example to try to emulate how we would build up the definition of a window.
We're going to write out this example using JavaScript because to be honest it's just about impossible
to implement using typescript.
All right.
Pull open a quick type or semi quick javascript editor here inside my browser if you want to write out
this code as well you can go to Steven Greider dot get hub dot Io slash playgrounds all right so as
a code editor on the left hand side we can write out some stuff and the result of it will just be printed
Emily on the right hand side.
So just a really quick place to write out an example.
I'm going to follow the same pattern we just saw on that blog post I'm going to create a function here
called rectangular and the goal this function is to take in some state object that remember has some
like instance variables tied to it and then we're going to return an object that has some methods that
I want to eventually use in some definition of something that is rectangular.
So if something is rectangular chances are we want it to have like an area method right yeah that makes
sense.
So I'll give it an area method inside of here.
I will return state DOT height time state DOT width so I'm very clearly kind of making the implication
here that this state object that's coming in must have a height NDA with proper state property after
that.
I'll define maybe you like some OpenTable function and the goal of this is to give a door presumably
the ability to toggle itself open or close.
So I'm going to return an object that has methods to implement that behavior.
So I'll give it a method like toggle open
and inside of here I'll say state DOT open is the opposite of state DOT open so that's definitely some
like toggling behavior right there.
So now here's the important part to combine these behaviors together are kind of like compose them so
to speak into an object we would write a single function down here called like build rectangle window
that's going to be called with some state object now this example is slightly different than the blog
post we just looked at.
In the example we just looked at they defined that state object directly inside of this function that
was intended to actually build an instance of an object.
We're going to say we're going to pass in those instance properties as an argument because that's way
more flexible than what that example had that we're just looking at.
All right so then inside of here we'll say return object dot assign state rectangular with state and
open a bowl with state.
Now the code here is just a little bit confusing remember it's not super critical for you to understand
exactly what's happening here.
We're basically saying take the state object throw it into OpenTable when we call OpenTable it's going
to return an object that has some methods on it then take the state object and throw it into rectangular.
That is also Whoops I've flipped switch OpenTable in rectangular but you get the idea.
So return an object that has some methods on it.
So essentially this right here is going to turn into an object that has some methods.
This is going to turn into an object that has some methods and we're going to take all those different
methods and copy paste them down to the state object.
So now to actually create a rectangular window we would say something like rectangle window is build
rectangle window and we'll pass in our state object.
So this would presumably have like a height property a width and some like open state that we'll start
off as false.
So now to actually use this object like this is the actual instance of the object we care about.
We could do things like say rectangle window not open to see whether or not the window is open or not.
And that is we get false as the output.
So then we could call rectangle window dot toggle open that should toggle the open status.
Then we can print out rectangle window again.
You'll see that now it's open.
So again the entire idea behind this approach is that we have these kind of separate definitions of
methods and we're going to combine them together to actually build a usable object so when all these
blog posts are using the term composition again.
Yeah sure I can buy that this is some form of composition in the strictest sense of the a literal English
definition of composition because we are composing the behaviours of an object by combining them together.
But the big point here is that this is just plain not the same definition of composition as you find
in this book.
And this quote right here is what everyone is quoting these authors were some very very very smart people
said you you should use this pattern right here overclass inheritance and we've got all these authors
who are writing blog posts who are saying oh when they said composition they're saying this thing and
what they're saying just not what the authors of this book are talking about.
So again.
Yeah sure I can buy that it's called Composition and that's really where the confusion comes from but
it's not the same composition.
And so the authors are not saying the authors of this book right here are not saying to do this this
is not what we want to do this is just plain not a good pattern.
And I can show you why this is not a good pattern very very easily.
Let's say for some reason OpenTable right here also has an area method
right.
OK well what does that mean.
That means that when we have some object that combines the methods from rectangular and OpenTable which
area method are we going to actually get the area method that we end up getting here.
Just comes down to the order in which we list them out in the object a signed statement.
So this entire pattern right here is incredibly fragile.
If you ever happen to have any methods with the same name if you ever do that's pretty much it.
You can't combine those different sets of methods together because you're going to very quickly get
some super unexpected behavior this entire pattern that you're seeing here some of these blog post authors
are calling it like concatenate of inheritance or something like that or concatenate composition I think
as kind of like an alternate definition what it's really called is multiple inheritance.
That's what we are really doing here.
So we're building up the definition of some like rectangle window thing by combining all the different
methods from something that is OpenTable and rectangular.
You can kind of imagine that Yup we're going to copy paste literally copy paste in this case all those
methods and all these methods down to rectangle window.
And remember once again earlier on in this course copy paste methods.
Gee that sounds an awful like inheritance.
That's exactly what the blog post authors are advocating it is multiple inheritance that they are showing
here they are inheriting methods from multiple different sources.
I think that's enough.
I think you get the idea of where I'm coming from here again so much of these community can produced
articles around composition are just really off in left field on this topic.
So hopefully this gives you a better idea of what these book authors were talking about when they were
discussing object composition.
So in this course we're going to stick to like the book definition of object composition as much as
we possibly can.
We're still going to look at some examples of class inheritance just you get an even balance of both
approaches.
OK.
So like I said that's enough.
Let's take a quick pause right here and we'll continue in the next video.