4-JS OOP: Class Inheritance
Tags: javascript, oop, typescript
Published: 2022-11-18 12:36:53

---
title: 4-JS OOP: Class Inheritance
published: true
description: 
series: jstsoop
tags: javascript, oop, typescript
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xk5uylbcq0wbyrozz8i9.png
# Use a ratio of 100:42 for best results.
# published_at: 2022-10-25 09:51 +0000
---

## Introduction

Inheritance is a way to create a new class from an existing class, the new class is called `child` class and the existing class is called `parent` class.

## Types of Inheritance

There are 3 types of inheritance:

* Single Inheritance
* Multiple Inheritance
* Hierarchical Inheritance

## Single Inheritance

Single inheritance is the simplest form of inheritance, it is a way to create a new class from an existing class, the new class is called `child` class and the existing class is called `parent` class.

Let's see an example in JS:

```js
class Human {
    name;
    age;
    gender;
}

class Male extends Human {
    beard;
}

class Female extends Human {
    hair;
}
```

Here we have 3 classes, the `Human` class is the parent class, and the `Male` and `Female` classes are the child classes.

Each child has added a new attribute to the parent class, so in overall the `Male` class will act as if it has the attributes `name`, `age`, `gender`, and `beard`, and the `Female` class will act as if it has the attributes `name`, `age`, `gender`, and `hair`.

We can actually override the attributes of the parent class in the child class, for example:

```js
class Human {
    name;
    age;
    gender;
}

class Male extends Human {
    beard;
    gender = 'male';
}

class Female extends Human {
    hair;
    gender = 'female';
}
```

Here we have overridden the `gender` attribute of the parent class in the child classes as we already know that the `Male` class is a `Human` and the `Female` class is a `Human`, so we don't need to define the `gender` attribute in the child classes because each child knows its gender (we can doubt that nowadays 😂).

## Multiple Inheritance

Multiple inheritance is a way to create a new class from multiple existing classes, the new class is called `child` class and the existing classes are called `parent` classes.

This is actually not supported in JS, but we can achieve it using mixins, which we'll learn about it later.

## Hierarchical Inheritance

Hierarchical inheritance is a way to create multiple child classes from a single parent class.

For example, the `GrandChild` class extends `Dad` class, and `Dad` class extends `GrandPa` class, so the `GrandChild` class is a `Dad` and a `GrandPa`.

```js
class GrandPa {
    name;
    age;
}

class Dad extends GrandPa {
    beard;
}

class GrandChild extends Dad {
    hair;
}
```

In the above example, the `GrandChild` class is a `Dad` and a `GrandPa`.

In that sense, the `GrandChild` class inherits from both the `Dad` class and the `GrandPa` class.

Let's see another practical example.

We can have a `Person` class, that `Person` class can be a `Teacher` or an `Employee` or a `Student`, so we can create a `Teacher` class that extends the `Person` class, and we can create an `Employee` class that extends the `Person` class, and we can create a `Student` class that extends the `Person` class.

```js
class Person {
    name;
    age;
}

class Teacher extends Person {
    subject;
}

class Employee extends Person {
    salary;
}

class Student extends Person {
    grade;
}
```

In the above example, the `Teacher` class is a `Person`, the `Employee` class is a `Person`, and the `Student` class is a `Person`.

We can actually make more hierarchy structure, for example, we can extend the `Employee` class with a child class called `Manager` as any `Employee` is a `Person` and any `Manager` is an `Employee` and a `Person`.

```js
class Person {
    name;
    age;
}

class Employee extends Person {
    salary;
}

class Manager extends Employee {
    department;
}
```

## 🎨 Conclusion

Inheritance is a way to create a new class from an existing class, the new class is called `child` class and the existing class is called `parent` class.

This is one of the most important concepts in OOP, and it's very useful in real-world applications, you can see that clearly in the [Node Js Course](https://dev.to/hassanzohdy/nodejs-course-2023-introduction-to-nodejs-3n4e).

## ☕♨️ Buy me a Coffee ♨️☕

If you enjoy my articles and see it useful to you, you may [buy me a coffee](https://www.paypal.com/paypalme/hassanzohdy), it will help me to keep going and keep creating more content.

## 😍 Join our community

Join our community on [Discord](https://discord.gg/uBh98KZGGF) to get help and support.

## 📚 Bonus Content 📚

You may have a look at these articles, it will definitely boost your knowledge and productivity.

General Topics

* [Event Driven Architecture: A Practical Guide in Javascript](https://dev.to/hassanzohdy/event-driven-architecture-the-best-paradigm-that-i-love-to-work-with-in-javascript-and-node-js-1gnk)
* [Best Practices For Case Styles: Camel, Pascal, Snake, and Kebab Case In Node And Javascript](https://dev.to/hassanzohdy/best-practices-for-case-styles-camel-pascal-snake-and-kebab-case-in-node-and-javascript-55oi)
* [After 6 years of practicing MongoDB, Here are my thoughts on MongoDB vs MySQL
](https://dev.to/hassanzohdy/after-6-years-of-practicing-mongodb-here-are-my-thoughts-on-mongodb-vs-mysql-574b)

Packages & Libraries

* [Collections: Your ultimate Javascript Arrays Manager](https://dev.to/hassanzohdy/collections-your-ultimate-javascript-array-handler-3o15)
* [Supportive Is: an elegant utility to check types of values in JavaScript](https://dev.to/hassanzohdy/supportive-is-an-elegant-utility-to-check-types-of-values-in-javascript-1b3e)
* [Localization: An agnostic i18n package to manage localization in your project](https://dev.to/hassanzohdy/mongez-localization-the-simplest-way-to-translate-your-website-regardless-your-favorite-framework-4gi3)

 React Js Packages

* [useFetcher: easiest way to fetch data in React Js](https://dev.to/hassanzohdy/usefetcher-the-easiest-way-to-fetch-data-in-react-45o9)

Courses (Articles)

* [ES6++: The Ultimate Guide to ES6 and Beyond](https://dev.to/hassanzohdy/es6-1-introduction-h3e)
* [Node Js 2023 Course: Node With Typescript, The Ultimate Guide](https://dev.to/hassanzohdy/nodejs-course-2023-introduction-to-nodejs-3n4e)
* [React Js: Let"s Create File Manager With React Js and Node Js](https://dev.to/hassanzohdy/lets-create-a-file-manager-from-scratch-with-react-and-typescript-chapter-i-a-good-way-to-expand-your-experience-5g4k)