Composition vs Inheritance in JavaScript

This is more of an intermediate topic in JavaScript. Understanding the implications of how you architect your applications will help you down the road as your application becomes more mature and requires updates.
Inheritance and Composition are two approaches to designing your Objects to be maintainable.
This video focuses on the weakness of Inheritance when your objects start to morph in the future.
The examples in this video are built without Classes. They use Object.create and Object.assign to show the more standard JavaScript syntax.
Code GIST: gist.github.com/prof3ssorSt3v...
If you want more information about how to use Object.create( ) or Object.assign( ) watch these:
Object.assign: • Using Object assign( )...
Object.create: • JavaScript Object crea...

[@mubashirwaheed474]

Every single time I come to your channel to understand any topic, sir you don't disappoint me. Thank you so much.

[@maxtayebwa8987]

Back in the library, amazing content, Prof!

[@rotrose7531]

You are great, normally I have a tendency to avoid facing complicated code like this simply because I do not understand it. But your explanation finally brings some hope on me that I might understand it eventually. Thank you.

[@arnabbanik2515]

AMAZING explanation. clear and concise. thank you

[@PerfectSwingDance]

Amazing explanation

[@chesterxp508]

Another very cool tutorial !!!

[@AndrewDevUA]

clear and easy to understand! Thx!

[@ridl27]

very useful and clear explanation. thx!

[@connor3959]

Great video! I learned a lot and will use this knowledge in my future projects. Thanks!

[@perthDev]

really great explanation, made it easy to understand.

[@Coxander]

Great video, again!

[@kirankandula2779]

Thanks for the explanation. Nice and simple.

[@ChrisFotosMusic]

the dog shaking off at 7:00

[@thearduousalchemist2804]

nice work sir

[@HansLowell]

I finally understand :)

[@AndricLibreSinn]

Hey Steve, since you're on a Mac you can click and hold the green expand button in the menu bar to get set one window to half the screen and then just click on another window to set the other half of the screen. Then you don't have to switch between windows anymore. You can also resize one to be larger than the other by clicking and holding the center of the two windows.

[@SteveGriffith-Prof3ssorSt3v3]

Andric LibreSinn I can do that but my MacBook is dual boot and I work in both Windows and OSX. I'm usually working a lot more than two Windows and my normal work flow is using Alt+tab or Cmd+tab to switch between Windows. Old habits.

[@SteveGriffith-Prof3ssorSt3v3]

Andric LibreSinn what I really need is a better set up for my Mic to isolate it so it isn't on the table beside my keyboard

[@zomars]

Came from cferdinandi. Very nice explanation!

[@UserProxy1]

Yep, same here, inherited from cferdinandi, the vanilla JS guy.

[@SteveGriffith-Prof3ssorSt3v3]

Chris is a good guy with excellent content.

[@ashutiwari6161]

Hey Steve, really nice videos, they have helped me a lot, thanks, I have a doubt it might be silly but you haven't written a return statement inside walker or talker, so I was wondering what they would return and how does it work.

[@SteveGriffith-Prof3ssorSt3v3]

All functions in JavaScript return undefined unless 1. You add a return statement to return something else 2. The function is called with the new keyword, in which case it will return a newly created object.

[@Minotauro_di_Chieti]

Wow, awesome job, your explanation helped me a lot to understand these principles; now I have a question: is it correct to use a mixin to "keep" all those methods in a sigle "place"?

[@SteveGriffith-Prof3ssorSt3v3]

Sure. No problem doing that. But like everything in programming, it depends on how you are using it. Context is everything.

[@michaelmudge3080]

Great videos and explanations man, you really make things clear and easy to understand. My question is what are the advantages of inheritance? Just that your objects will have shared state, and you won’t run into problems like you sort of did at the end there not knowing what the state object would look like in the functions that your composed object uses, and having to check for name or id, where if you used inheritance you always know your human would have a name. Is there any other advantages to using inheritance ?

[@SteveGriffith-Prof3ssorSt3v3]

Not really. Any series of objects can be planned with inheritance. The problem is that over time requirements and features change. Eventually you end up creating objects that are inheriting things you will never use OR wanting to remove a property but you can't because it will break the objects below it. With composition you can make much more atomic structures which can be combined in any way you need to create a new object.

[@michaelmudge3080]

@@SteveGriffith-Prof3ssorSt3v3 awesome! thanks for the reply, you're the man!

[@X.A.N.A..]

For this sort of design pattern do we need getters or setters? Also can we create static methods? Amazing video btw

[@SteveGriffith-Prof3ssorSt3v3]

You do not need getters and setters but you can use those or Proxies. JS added proxies in ES6. If you use the class syntax in JS, there is a static keyword that you can use to create methods. It really just means that you are adding the method to the prototype instead of in the instance.

[@X.A.N.A..]

@@SteveGriffith-Prof3ssorSt3v3 Thank you 😊 !!

[@Mal-nf2sp]

But the functions will not be in the prototype chain thus having the same function in all of its instances right?

[@SteveGriffith-Prof3ssorSt3v3]

The object we compose will contain all the methods we are combining. However, we can then use this object as the prototype for something else if we want.

[@Mal-nf2sp]

@@SteveGriffith-Prof3ssorSt3v3 Thank you for your response. So what then would be the difference from attaching the methods like so which you would still be able to achieve composition with? theClass.prototype.method = method;

[@SteveGriffith-Prof3ssorSt3v3]

@@Mal-nf2sp With inheritance you only get one prototype or a fixed linear chain of prototypes. With the composing approach you get to bring in lots of atomic methods. It's easier to make small changes to those atomic methods without worrying about breaking other objects that are inheriting a prototype chain. There is no one answer to this that solves all situations. It is a judgement call that experience will help you understand better.

[@pooyaestakhry]

I didn't understand the reason for rest and join in talker talk method. what is that for ?

[@SteveGriffith-Prof3ssorSt3v3]

It means that you can pass an unlimited number of strings and/or variables into the method and it will concatenate them together as a result.

[@pooyaestakhry]

@@SteveGriffith-Prof3ssorSt3v3 thank you.

[@ke6944]

So inheritance is similar to vertical gene transfer and composition -- horizontal gene transfer.

[@SteveGriffith-Prof3ssorSt3v3]

More like with inheritance you have one gene set that you inherit and build on. With composition you get to pick the number of parents and get access to all their genes. Mix and match to build the kids.

[@ke6944]

@@SteveGriffith-Prof3ssorSt3v3 thanks

[@theunbearables]

Isn't it best practice to put methods on the prototype ?

[@SteveGriffith-Prof3ssorSt3v3]

It depends. If you are building custom objects with JavaScript you can take two approaches - inheritance and composition. Both have positive and negative aspects. If you are using inheritance then putting methods and properties on the Prototype is a good way to approach it. Putting methods on the prototype means that they will be shared with all instances of objects of that type, regardless of whether you put the methods on the prototype before or after you instantiate the objects. Inheritance is a different way to approach the architecture. However, when you call Object.create you are still using the Prototype. In this example : let anotherObj = Object.create( obj, {other: prop} ); obj is another object which will be used as the Prototype for anotherObj. If obj had methods then those are now on the prototype for anotherObj.

[@vbombos]

The title of the video should be "How to implement multiple inheritance in JavaScript", because this is exactly what you are doing. You are injecting/copying all properties and methods at the same level inside one object. If you add a talk() function inside wifier, you would override talker.talk() when you inject wifier after talker to Cyborg. This is a textbook issue that can occur with multiple inheritance, and in your example it would be impossible to detect. To actually implement composition you have to have an instance of talker, walker and wifier inside Cyborg. And to access the features you would have to do Dolph.walker.walk(), Dolph.talker.talk(), etc. If you really want to make Cyborg feel like inheritance you could add a walk() method inside Cyborg and forward the call to the embedded walker object: walk() { this.walker.walk() } This way you have full control over all features inside Cyborg and there is no way to have ambiguous methods with the same name or other side effects. You can pick and choose the walker.talk() or wifier.talk(). Some languages like Python even have a decorator that can automatically create these forwarding functions.

[@thebattinson1278]

This !

[@ivanello_dolce]

Hi, I've recently come across this concept in JS and it led me to a few different videos much like your own. I understand the concept clearly and you explain it very well, but I also stumbled upon a Reddit topic (link down below), which points to a similar video, saying that's not composition but multiple inheritance instead and its benefits over single inheritance. Do you have any thoughts, explanations regarding that? www.reddit.com/r/programming/comments/5dxq6i/composition_over_inheritance/da8bplv/

[@SteveGriffith-Prof3ssorSt3v3]

Inheritance is really talking about what you get from your parent object. In JavaScript, inheritance is done through the prototype chain. There is only one chain, only one parent, only one constructor. There is no multiple inheritance in JS. You can construct / combine / compose a new object that is built out of copies of other objects. However, there is no inheritance taking place here. Once your object is built, unlike with prototypes, you don't have a lasting connection like you do with the prototype chain.

[@ivanello_dolce]

@@SteveGriffith-Prof3ssorSt3v3 Thanks!

[@jeffm712]

Hi I'm the author of that reddit comment, and unfortunately I've had to write another similar comment recently. www.reddit.com/r/learnjavascript/comments/gxw7yl/understanding_composition_in_place_of_inheritance/ft61d3l/ JavaScript may not support multiple inheritance as a builtin feature with a keyword, but using Object.assign in this way nonetheless achieves exactly the same effect. And not only is it not composition, it's the literal opposite of composition.

[@savvyshah]

Cyborg is more intuitive than gorilla holding a banana in a jungle.

[@dzenish.2262]

The 5 people who have disliked this video, should not be coding. Try something else, man. I don't know, being a plumber, maybe. PS - Great example with a solid explanation. It deserves a lot more views.

[@jeffm712]

Hi I'm one of the 5 who disliked this video. I did so because, unfortunately, the video author is mistaken, and actual composition never once made an appearance in this video. What he actually showed you without realizing it is multiple inheritance. Explanation here: www.reddit.com/r/learnjavascript/comments/gxw7yl/understanding_composition_in_place_of_inheritance/ft61d3l/