Structure JavaScript Code using Classes

Introduction

Classes are fundamental to Object Oriented Programming (OOP). You can think of a class as a blueprint to create objects.

OOP in JavaScript is different than classical OOP as it uses prototypes rather than classes. ES6 classes are a syntax shortcut for a common JavaScript pattern used to simulate classes.

If you have worked in ES5, you know we didn’t had classes. Instead, we have constructor function and that’s what class keyword does in ES6.

I have written a post about JavaScript Modules and that shows how export and import keywords work. I will be using the same codebase for the demos in this post, you can use your own codebase if you like. I will suggest to first read that post and then come back here and this way it will be easier to follow the contents in this post.

Before we see more details about ES6 Classes, lets see how constructor function is used for such purpose.

ES5 vs ES6

Before, we learn how classes can be implemented in ES6, I would like to show you how this is done in ES5. Don’t worry if you are new to classes and do not understand the syntax, here just see the syntax and we will explain classes in details later in the post.

Here is an example of ES5 way of working with classes (constructor function):

Now, let’s see how we can write the same code in ES6:

We can also extend classes in a manner consistent to standard OOP languages:

and now see how this can be done in ES6:

In the rest of the post, we will focus on the ES6 way of working with classes.

Class Basics

Let’s start with a very simple class. We will create a class to model a Car:

Here, we have a class for Car. Its empty for now, but that’s how you create a class in ES6.

Once we have a class, we can use it create objects by using it as a blue print. Lets see how we will create object:

Here car1 is the object created from class.

Constructor and Properties

Our Car class is empty. Let’s add some properties to it. Usually we use constructor for defining properties:

and here is the object creation part:

and here is the output of the console.log which uses string interpolation:

Methods

In addition to having properties on a class instance, we can also have methods:

following code shows how this method is called:

the output of this method call is shown below:

Inheritance

Inheritance refers to classes driving functionality from other classes. Assume that in addition to cars we also have trucks in our system. Both are some kind of vehicle and we can model this relationship using inheritance:

When we use inheritance, we use the extends keyword.

The following code shows a basic modeling attempt which uses extends keyword:

We now have a Vehicle base class and both Car and Truck classes extends that base class. Notice that Car has a property make and Truck has a property storageArea, however the id and name are present in both classes, so we put those in the vehicle class.

we typically do not instantiate base class (vehicle). We can do that but mostly we work with business objects only (car, truck).

Let’s see how we work with these business objects:

and here is the console output:

Method Overriding

Method overriding, in object-oriented programming, is a language feature that allows a subclass or child class to provide a specific implementation of a method that is already provided by one of its bases class or parent class. It allows for a specific type of polymorphism (subtyping).

If you notice that we have start() method in Car class, but we do not have such method in truck. In this example, we want that both Car class and Truck class must have this method implemented. One way to do is that we provide the method definition in the Vehicle (base) class and then override it in sub classes. Lets see this next:

Now, if we try to execute this method on truck object, it will leave developer with a message to let them know that they need to provide implementation for this method. Here is the example, if developer do not override this method in truck class:

console output:

To fix this error, we will provide a simple implementation of start() method for Truck class:

and here is the output:

Summary

In this post, we saw that how we can use ES6 classes for modeling business objects in our application. We also learned that ES6 classes are syntax shortcut on constructor functions, however they result in much cleaner code and we saw some examples of inheritance and method overriding.

You can download the code from this git repo (oopBasics branch):

Let me know if you have some questions or comments. Till next time, Happy Coding.

My Recent Books