The Biggest Misconception in JS Community — Composition
Introduction
If you are trying to get a good understanding of what’s composition vs inheritance, you probably search on google etc., read articles and watch videos around “composition vs inheritance”. Here’s the problem, you are going to learn incorrect definition of composition.
Problem
This is coming from a book written in 1994.
“Favor object composition over class inheritance”
— Design Patterns: Elements of Reusable Object-Oriented Software (page 20)
The majority of sources around “composition vs inheritance” has a huge misconception about the composition itself. But they use the statement above as a sign post, saying, hey, we should favor composition over inheritance. Actually this is one of the most misunderstood statements ever in the JS community. And the problem is not about the statement above, the statement itself is correct, the author gave a very strong argument why we should favor one over the other. The problem is that we have tons of beginners in JS community who get wrong mindset around composition, and tons of engineers who write weird code, thinking these authors were saying one thing, while in fact they meant something very different.
Goal
There is an impression that everyone’s understanding of this word is just wrong. Our goal is to understand what’s the author talking about, and what composition actually is. The right way of composition vs inheritance. And finally, show what’s actually wrong with those explanations from different sources.
OK, let’s get into it
— What’s the book’s authors talking about?
Delegation is a way of making powerful compositions. And that’s it, that’s what the author is saying. What’s actually “Delegation”? Well. Let me quote the author’s words. But before, let’s imagine we have a window which has a shape of rectangle, and has width, height, area.
“Instead of making class Window a subclass of Rectangle (because windows happen to be rectangular), the Window might reuse the behavior of Rectangle instance variable, and delegating Rectangle-specific behavior to it. In other words, instead of a Window being a Rectangle, it would have a Rectangle. Window must now forward request to its Rectangle instance explicitly, whereas before it would have inherited those operations.”
— Same authors, same book and same page☝️
Real Composition
Let’s make two different javascript examples of this Window. In the first example Window uses inheritance, and in the second example Window reuses the behavior of Rectangle instance variable.
In the first one, we have a Window which “is” Rectangle. In the second one, instead of inheritance, the Window “has” a Rectangle.
The first example’s Window is less reusable being a Rectangle. Let’s imagine you have a Rounded class for rounded windows too. Well, you can’t extend both Rounded and Rectangle classes for the same Window class, and you can’t make an instance of Window for rounded windows either. But in the second example, Window can have an instance variable of Rounded class. Which makes the Window class much more reusable. Here’s how
— What people do when they discuss composition
They return objects from their functions, and copy to another object using Object.assign (or spread operator). In the literal meaning, well, you can call it composition, but the thing is that you loose the object’s reference when you copy it.
So it’s a multiple inheritance, or a fake composition rather than that composition from the book “Design Patterns (1994)”.
Conclusion
The book author’s composition is keeping the object’s reference by using instance variables. You might notice, there’s a huge difference between instance variables and object copies.
I did my best to explain this in the simplest way, I hope it wasn’t too hard to understand even for a beginner. But if so, please, read again, play around the code, make your own one to understand better. Now that you have the right understanding of composition, open a google tab, do some research.
References
Design Patterns: Elements of Reusable Object-Oriented Software.
Typescript by S. Grider.
And lot of google and youtube.
