How Child Classes and Inheritance work in JavaScript

An introduction to JavaScript classes, extends, and super

Joseph Haefling
Nov 3, 2020 · 5 min read

Hi y’all, I am back today with the second part of my introduction to JavaScript Classes.

Today, I am going to cover child classes, inheritance, the extends, and the super keywords. So, without further ado, let’s get this party started.

In my last post, I compared JavaScript classes to Chipotle. As a matter of fact, I said “I like to think of a class as being like Chipotle; people go in, and they come out with burritos.” Well as you probably know, you are not limited to burritos at Chipotle. You can also get a burrito bowl, tacos, or a taco salad, but all of those meals still have the same options as a burrito when it comes to ingredients.

Image for post
Image for post

So, to revise my previous statement, I like to think of a “parent class” as being like Chipotle; people go in, and they come out with meals. What about those meals, though? They may be different from one another, but they are made out of the same ingredients.

Image for post
Image for post
Image for post
Image for post

In order to create a Parent class, the first thing that we need to consider is what all of the meals all have in common. Whether you are getting a burrito, tacos, a burrito bowl, or a taco salad, they all share the following options: lettuce, beans, protein, veggies, cheese, guac, sour cream, and salsa….right? Since you can make a taco salad without adding to those ingredients, let’s make our parent class a taco salad.

Step 1: Class declaration

Image for post
Image for post

Now that we have the TacoSalad class declared, we want to add the constructor method. Remember, the constructor method is like your burrito artist (in this case your meal artist), which means that we need to give it the parameters of all the ingredients to make a taco salad, like so.

Step 2: Add a constructor & methods

Image for post
Image for post

Now we can make a salad with any ingredients that we choose, that wasn’t so bad, right? But, what if a customer comes in and they want a burrito bowl? We could create a new class called BurritoBowl, but a burrito bowl and a taco salad seem pretty similar. That would be kind of like having an ingredient station for taco salads, one for burrito bowls, one for tacos, and one for burritos.

Image for post
Image for post

That would be pretty redundant right? Instead we could add rice to the ingredient station and add it to the meal only when it’s needed. This would be a good opportunity to use the extends keyword; we can use extends to create a class that is a child class of TacoSalad. The child class will inherit all of the key-value pairs and methods of the parent…kinda like I inherited my dad’s hairline. Let’s take a look at how this works.

Step 1: Class declaration with extends

Image for post
Image for post

Now that we have declared our class of BurritoBowl, we need to give it a constructor method just like we did with our TacoSalad class, but what are we going to put in the constructor? To me, it looks like a burrito bowl has the same ingredients as a taco salad except it is on a bed of rice, so let’s add a riceType parameter to our constructor.

Step 2: Add a constructor method

Image for post
Image for post

At this point, if we instantiate a new instance of BurritoBowl we will get an error because we are extending the TacoSalad class but we are not using the super keyword. A constructor can use the super keyword to call the constructor of the parent(or “super”) class allowing the child class to inherit all of the key-value pairs and methods from its parent. Wow, that keyword really is super! …and it’s going to save us a lot of code. Let’s see how it works.

Step 3: Add the super keyword

Image for post
Image for post

Let’s create a new instance a BurritoBowl to see how it works! Notice that since our BurritoBowl accepts one extra argument of riceType we will include that in the BurritoBowl constructor, however, since TacoSalad does not accept that argument we will leave it out of the super like so.

Step 4: Instantiating instances of a class

//add more to the fajita veggies array

Image for post
Image for post

Now, If we log newMeal (our new instance of BurritoBowl) you can see that it has inherited the key-value pairs from TacoSalad, and it has a riceType property as well. We can also log BurritoBowl.smellDelicious() and see that it has also inherited its methods from TacoSalad.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Now that you know how to create a child class, let’s create a Taco and Buritto class. Before you scroll down, go ahead and give it a shot. If you are feeling pretty confident, try adding a new method to the Taco class.

Image for post
Image for post
Image for post
Image for post

Going forward if we decide to add new items to our menu, we can use the extends and super key-words to create a child class, rather than duplicating code.

In this blog post we covered how to use inheritance along with the extends and super keywords to create child classes. We also covered the advantages of using child classes to make clean, reusable code. I hope that you found this article helpful; if you have any topics that you would like me to cover in the future, drop them in the comments.

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Joseph Haefling

Written by

I am a front-end software engineer, a former social worker, an amateur musician, a foodie, and a recent graduate of Turing School of Software and Design.

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Joseph Haefling

Written by

I am a front-end software engineer, a former social worker, an amateur musician, a foodie, and a recent graduate of Turing School of Software and Design.

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store