Why you should choose composition over inheritance | Javascript OOP Tutorial

Why you should choose composition over inheritance when you are creating objects. This tutorial will look at both approaches to creating objects and show you why composition is the best choice as well as the problems that arise with inheritance.

Advanced Javascript Tutorials mentioned in this video:

Why you should choose composition over inheritance | Javascript OOP Tutorial

(00:00) Intro
(0:18) Problems with object inheritance
(4:45) Composition to the rescue
(10:41) Data structure mutation
(12:51) Cloning to avoid mutation
(16:15) Bonus: Refactoring to a declarative expression
(17:49) Review of Composition

✅ Follow Me:

Was this tutorial about choosing Javascript object composition over inheritance helpful? If so, please share. Let me know your thoughts in the comments.

#composition #inheritance #javascript

[andrewcordoba]

This tutorial is perfect for consolidating deep concepts. Years have passed and it's still good stuff. Good job

[xifrefont]

I've been looking for a JS tutorial were I could focus on more advanced topics, now that I (believe I) have the foundations. This is gold, been following this tutorial and I'm amazed with the quality of the explanations and the concepts you bring - of which very few I knew before.

Thanks a lot, I very rarely leave youtube comments but I felt in the need to thank you for this. I am learning so much!

[АлександрСеменов-бс]

Very laconic explanation! Thank you, sir!

[matinsasan]

Usually some say one shouldn't be "opinionated" about one's approach to code, but here you clearly showed how composition owns inheritance in any way, and I wonder what those people could say as a counterargument. You enlightened us in this topic. Thank you, dear mentor.
Just one wish: in one comment here you replied about the real use case of inheritance (which again composition owns it whenever its use is possible), I hope it was included in the video as well, as a summary or so.

[vukkulvar]

One caveat is you're creating multiple times the same method.

if you don't need to make closures and they're meant to persist, you can change

function butter() { return () => console.log("Buttering the crust..."); }
{ ...butter() }

into

function butter() { console.log("Buttering the crust..."); }
{ butter }

to save on memory

[jaydenmoon]

I have a solid foundation of knowledge of JavaScript - I honestly love your vids - I always enjoying finding new more advanced ways of working with code - happily subscribed <3

[shineLouisShine]

05:26 - I can see whay does the pizza (AS AN OBJECT?) gets a prefix of a spread operator,
But why do the functions get it as well?
- Each function is being called only once for each pizza object,
So what is the reason that the spread operator comes before them as well?

[muneefaltamimi]

thanks a lot Dave for this amazing explanation!

[sj]

Class can't do composition? I can imagine a class has these methods and have functions pass in as args.

[vasimahmed]

Concise and on point. I love it.

P. S writing a one liner code is a creative experience in itself. Condensing code into is most core form.
Kind of like this video actually

[soniamaklouf]

Dave when you do return { ...pizza, ...prepare(), ...bake(), ...ready()} you spread the pizza object and all this function in one object. I find it interesting because I've never seen function being spread

[PS-dpyg]

Awesome content! Subscribed. Correct me if I'm wrong, but there is a slight issue doing it this way. Every time you call the create method, those methods are not going to be added to the prototype but the object itself. As a result, if you create two pizzas using createPizza, it will create prepare, bake, and ready twice per object. If it was on the prototype, those methods would be created once and shared among the two pizzas.

[zoki]

Hey Dave it seems that source code on github is missing 12:50 onwards.
I don't need it but maybe someone in future might need it.

and thanks for making great tutorials.

[prabhu]

So whats the real use case of using inheritance and classes if everything can be scaled with composition ?

[djzenma]

Yes Composition is flexible, but it is too verbose, you have to create every function separately on its own, and then use it to compose something bigger, which when the project gets bigger is hard because you will have too many functions that you don’t know anymore how to use them or what uses them. However, with OOP, you have everything needed in a single place (the class).
In short, OOP offers abstraction and encapsulation, which composition clearly lacks.
(And I didn’t even mention how you will suffer when you type all these composition functions, you will have to describe the type of every single return type which gets too complicated and too much very fast.)

[marcuslorenzokai]

Hi Dave, I need your help please...you are my primary source of learning! I'm building a serious personal project in React right now, and I'm unsure whether to use inheritance in my program. It's a Boxing Simulator where the user creates an account, which generates a Boxer with 20 attributes of random value. On submission, 30 random boxer-opponents are generated and everything is persisted on the cloud. Boxer profiles, { conditioning, strength, speed, agility, chin, ...others }, Wins, Losses, a ranking system, charts for body and head damage, a full 12 round fight etc...a LOT.

Since the "inherent" properties are consistent, is it bad convention to use classes (class constructor) with said web app? Or should I construct my "boxer objects" with full composition, and just have a laundry list of attributes as my arguments? And do I store this as "helper" functions or under a "businessLogic" component? Thank you so much, I've been following you since November of last year!

[venicebeachsurfer]

I get exactly what ur doing, but curious why we just don't pass in a spread'd object to prevent this mutation, ala

```
var origObj = {
age: 99,
name: 'bill'
}


function test(w) {
w.attribute = true;
return w;
}

console.log(test({...origObj}), origObj);

```

[santhoshraghavpidathala]

Can you please make a small app using Oops concepts in javascript

[mervinmarias]

Is it better to create the functions inside the global scope, or to create a global object and place everything inside it?

[mauro]

why you didn't initialized the toppings array in the constructor? what was the reason? and, is there a name or goal or something to do this?