One of the most often asked questions is “What should I use, inheritance or composition”. This is a common question and in general not relative to JavaScript only, but here, we will discuss this question using JS examples. Before reading next, if you don’t know what is or what is I highly recommend you to read or watch something about these approaches, because the main goal of this article, is to show you what and when will be better to choose. But, just to be sure, that we are on the same page, let’s discuss a little bit what is what. Composition Inheritance, is one of the core concepts of object-oriented programming, that helps us, developers to avoid code duplication. The main idea is that we create a base class, which contains logic, that will be reused by our subclasses. Let’s see an example: Inheritance From the example, we can see that we have a base class and all our future elements will extend common logic from the Element class. “ ” Element Also, maybe you heard relationship. What does it mean? For example, “ ” is an “ ” and  “ ” is an “ ”. is-a Form Element Button Element Another example, we can create a base class “ ” and our subclasses like “ ”, “ ”, “ ” also has relationship. Why? Because “ ” is an “ , “ ” is an “ ” and “ ” is also an “ ”. Animal Bird Dog Cat is-a Bird Animal” Dog Animal Cat Animal And now, let’s speak a little bit about . Unlike inheritance, the composition uses a relationship. We collect different pieces of functionality together. Let’s see an example: composition has-a In this example, we can see that we have main class “ ” that uses “ ” and “ ”. Car Engine Transmission In this example, we can’t say that “ “ is a “ ” or “ ” is a “ ”. But, we can say that “ ” has “ ” or “ ” has “ ”. Engine Car Transmission Car Car Transmission Car Engine I hope that you understand what is and what is if you forget. Inheritance Composition So, now, let’s look at different examples. First, we look at an example using the class way approach, and then, we will take a look at the function way approach. Imagine, we are working with the file system and we want to create read, write and remove functionality.  What can we do? Just, for example, we can create a class, that will do this, and it’s ok: I think for this moment everything is ok with this approach. But, a little bit later, we understand, that we want to have permissions, and some of our users will have just read permission, another one will have write permission. What can we do? One solution is can divide our methods, into different classes, like: And now, we can use the needed permission for each client. But, now, we have a problem. What, if we need to give someone  permission for the reading and for the writing? Or for the reading and for the removing? With the current implementation, we can’t do it.  How we can solve it? The first solution could be: to create a class for reading and writing, or for reading and for removing: If we do this, we will have next classes: FileReader, FileWriter, FileRemove, FileReaderAndWriter, FileReaderAndRemover. And it’s bad. Why? The first reason is if we have not just 3 methods, but 10, 20. We can have a really big amount of combinations between them. The second reason is that we duplicate logic in our classes. Just, for example, our FileReader class contains read methods, and FileReaderAndWriter also contains duplicate code of the same method. So, as you can see, it’s a not good solution. Do we have another approach? How about multiple inheritances? First of all, we don’t have this feature in Javascript, but, if we do, it’s also not good, because we will have really confusing design when 1 class inherits from another, and those other, inherits from many other. It will be really awful code architecture. So, what is the solution? One of the possible solutions here is to use composition. How it will look like? First of all, let’s move our methods to a separate function factory. Why function? Because maybe we want to pass some parameters later. In our example, we don’t need it. In the above example, we have 2 functions that create objects with the reading or with the writing method. What does it give us? Now, we can use them in any place where we want and combine them: In the example above, we created a read and write service. This is almost what we have at the start of our FileReader class (just without the “remove” method). And now, if we want to combine different permission: for reading and writing, or writing and deleting, we can do it very easily: If we have 5, 10, 20 methods, we can combine them how we want. We don’t have a problem with duplication code, we don’t have confusing architecture. Now, let’s see another example, without classes. Imagine, that we have employees. For example: taxi driver, sport coach, and manager: And everything is ok now. But, imagine a situation, where some employee works as a sports coach, but sometimes or at the night works also as a taxi driver. What can we do? Create a function like: Yes, it will work, but the problems are the same as in the first example with classes. We could have really many different combinations with code duplication. So, knowing now, how composition works, we can refactor our code like here: And now, we can combine all our work types as we want, without duplications and with an understandable approach: I really hope that now, you can see the difference between inheritance and composition. In general, inheritance could answer the relationship, when composition “is-a” “has-a”. But in practice, as we can see , is sometimes not a good approach. Just in our example, the driver is an employee and the manager also is an employee. But when our task is to combine different pieces into a single item, like here, really could be much better than . inheritance composition inheritance At the end of this article, I want to focus on that both and are good approaches when you are using them in the right place when they should be. In one situation composition is better than inheritance and in another situation vice versa. inheritance composition And of course, we can combine and together, if we have relationship, but we want to add different values or methods, we can have some base class, that gives all common functionality for our instances, and we can also use composition to add other, specific functionality. inheritance composition “is-a”

Different

Throttling vs Debouncing in Javascript

SOLID Principles in JavaScript: What Does the "D" Stand For?

Nominated for 2022 - HackerNoon Contributor of the Year - Design

Nominated for 2022 - HackerNoon Contributor of the Year - Performance

Nominated for 2022 - HackerNoon Contributor of the Year - Functional Programming

Nominated for 2022 - HackerNoon Contributor of the Year - Best Practices

Too Long; Didn't Read

Boost your HackerNoon story @ $159.99! 🚀

Inheritance vs Composition in JavaScript

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

A Look Into my Writing Process: Interview With Serhii Rubets, Full-Stack Software Engineer

9 Functional Programming Concepts Everyone Should Know

Forms of Composition in JavaScript and React

Higher-Order Functions Explained

Inheritance vs Composition: Using a Role-Playing Game in JavaScript as an Example

A Look Into my Writing Process: Interview With Serhii Rubets, Full-Stack Software Engineer

9 Functional Programming Concepts Everyone Should Know

Forms of Composition in JavaScript and React

Higher-Order Functions Explained

Inheritance vs Composition: Using a Role-Playing Game in JavaScript as an Example

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps