JS interview in 2 minutes / Inheritance in OOP
Tags: javascript, typescript, beginners, career
Published: 2021-04-29 11:28:16

---
title: JS interview in 2 minutes / Inheritance in OOP
published: true
description: Let's try to figure out how to answer common JS questions in an interview.
tags: javascript, typescript, beginners, career
cover_image: https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Unofficial_JavaScript_logo_2.svg/1920px-Unofficial_JavaScript_logo_2.svg.png
---

// It may be worth to read previous part first
// [JS interview in 2 minutes / Object-Oriented Programming (OOP)](https://dev.to/kozlovzxc/js-interview-in-2-minutes-object-oriented-programming-oop-3443)

**Question:**
What is Inheritance in OOP? 

**Quick answer:**
Inheritance is a way to modify or extend parent class in child class.

**Longer answer:**
Let's see what we've got in the previous post and try to extend it.

```javascript
class DogProfile {
  constructor(name, age) {
    this.name = name
    this.age = age
    this.isGood = true
  }

  bark() {
    alert('Bark!')
  }

  barkInEnglish() {
    alert(`Hello my friend! My name is ${this.name}.`)
  }

  // ...
}
```

Now we have a working dog's profile, but what if we need to add a cat's profile? It would be a bit different because good or bad terminology is not applicable to cats, they are above these measurements.

```
{
  name: 'Fluffer',
  age: 2,
  isFluffer: true,
}
```

Copying and modifying the `DogProfile` class would be weird since we will need to maintain two almost exact copies.

Inheritance to the rescue! We can move shared functionality to some standalone class and just inherit `DogProfile` and `CatProfile` from the new `BaseProfile` class.

```javascript
class BaseProfile {
  constructor(name, age) {
    this.name = name
    this.age = age
  }

  setName(name) {
    this.name = name
  }

  setAge(age) {
    this.age = age
  }
}

class DogProfile extends BaseProfile {
  constructor(name, age) {
    super(name, age)
    this.isGood = true
  }

  bark() {
    alert('Bark!')
  }

  barkInEnglish() {
    alert(`Hello my friend! My name is ${this.name}.`)
  }
}

class CatProfile extends BaseProfile {
  constructor(name, age, isFluffer) {
    super(name, age)
    this.isFluffer = isFluffer
  }
  
  meow() {
    alert('Meow!')
  }
}

const doggert = new DogProfile('Doggert', 2)
doggert.barkInEnglish()

const fluffert = new CatProfile('Fluffert', 2, true)
fluffert.meow()
```

Awesome, like this, we can create any new profile type without much effort and every new class will only have new fields and methods which are needed.

![](https://media.giphy.com/media/pO4UHglOY2vII/giphy.gif)


**Real-life applications:**

An issue with Inheritance is that if you don't plan few steps ahead, you may end up in mess.

One possible type of issue is when inheritance doesn't actually describe data relations.

```javascript
class Duck {
  quack() {}
  fly() {}
}

class Plane extends Duck {
  // Forbidding quacking...
  quack() { throw new Error('DO I LOOK LIKE A DUCK TO YOU?') }
}
```

This won't be a very reliable `Plane` to fly on. Imagine someone will update `Duck` fly methods with a time limit after it gets tired. The plane will get tired and return to the nest as well.

![Untitled_Artwork](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q08imjmw4xun52jc18rr.png) 

Another possible issue is when you have complex data and there are more than 9000 levels of classes nesting.

// I saw this once, it was terrible 😱

```javascript
class Base {
  constructor(id) { this.id = id }
}

class NamedProfile extends Base { /* ... */ }
class ProfileWithRoles extends NamedProfile { /* ... */ }
class AdminProfile extends ProfileWithRoles { /* ... */ }
// ...
// Things can get much worse if you end up using multiple inheritances without any control
// https://stackoverflow.com/questions/29879267/es6-class-multiple-inheritance/45332959

```

There is a way to play around with this issue using [composition over inheritance](https://www.youtube.com/watch?v=wfMtDGfHWpA) or using [design patterns](https://refactoring.guru/design-patterns). I will try to cover them in the following posts.

**Resources:**
[wiki/OOP](https://en.wikipedia.org/wiki/Object-oriented_programming)
[wiki/Inheritance](https://en.wikipedia.org/wiki/Inheritance_(object-oriented_programming))

**Other posts:**
* [JS interview in 2 minutes / Object-Oriented Programming (OOP)](https://dev.to/kozlovzxc/js-interview-in-2-minutes-object-oriented-programming-oop-3443)
* [JS interview in 2 minutes / Static vs Dynamic typing](https://dev.to/kozlovzxc/js-interview-in-2-minutes-static-vs-dynamic-typing-2d5k)
* [JS interview in 2 minutes / Higher Order Functions](https://dev.to/kozlovzxc/js-interview-in-2-minutes-higher-order-functions-38kb)

---

Btw, I will post more fun stuff here and on [Twitter](https://twitter.com/kozlovzxc). Let's be friends 👋