JavaScript — Guide to Classes in ES6

A more object-oriented way of declaring classes

In OOP languages such as C++, classes are the norm for encapsulating a service within a program.

In Javascript, classes have to be declared as an object prototype. They look absolutely nothing like a class declared in any other OOP language; their structure makes them very difficult to read.

The old class syntax also makes it difficult to hit all three marks of object-oriented classes — instantiation, encapsulation, and inheritance.

ES6 brings with it many needed features for JavaScript, but the new class syntax it introduces brings a much more familiar syntax, and it fulfills all three goals of OO classes.

Syntax

class SampleClass extends BasicClass {
  constructor(){
}
  method(){
}
  static otherMethod(){
}
}
let myClassInstance = new SampleClass()
let mySecondClassInstance = new SampleClass()

Finally, a class syntax that actually looks like a class! No more declaring prototypes. No more dealing with unreadable class spaghetti.

The class SampleClass can be instantiated an infinite number of times. All their states are separate. No instance will interfere with another.

The statickeyword will keep you from accessing the static method through an instantiated reference to the class. It works just like in other OOP languages!

You can inherit from other classes OOP-style using the ‘extends’ keyword.

The only downside is there is no support in JavaScript for private methods with this syntax. There are two ways to deal with this: prefix the method with an underscore, to show that it is private, and use the static keyword to make it seem private. There is no 100% foolproof way to implement it as of now.

You can use it in your browser

You can use ES6 classes right in your browser — no Babel needed!

Before, ES6 features could not be used without setting up a compiler. While it is still good practice to use Babel:

Over 97% of ES6 features are now natively supported by major browsers.

ES6 Classes are supported from Chrome 49+, Microsoft Edge 13+, Firefox 45+, Opera 13+, and Safari 9+.

Internet Explorer is the only exception, but it’s Internet Explorer…

ES6 Classes are now a first-class feature of the JavaScript language; that’s why it’s even more important to learn.

Making a Basic Class

For this example I am going to write the Point class which defines a point with (x, y) coordinates and break it down bit by bit.

This class takes variables x, y as parameters — two points — on line 2.

On lines 19 and 20, two instances of Point are initiated, with their own different inputs.

In the constructor method, the parameters we input into the instance must be assigned to the class instance (Lines 3 and 4). They are accessible to any method in the class.

The method getPoints() is called as a property of p1.

The static method distance is called with two Points as input, and it returns the distance between them.

You can see that while this method can be called from outside the class, it cannot be called as a child or method of p1 or p2.

Class Inheritance

Classes can summon the methods of other classes, called parent classes. Here we have a new class Dot, which inherits methods from class Point.

When we use the keyword ‘extends’, we grant class Dot access to the constructor and methods of class Point.

The radius is declared in a method specific to the class Dot on line 34.

We are able to call both the getDiameter() method (a method of Dot), and the getCoordinates() method (a method of Point).

There you have it.

That was a simple breakdown of the new ES6 class syntax in JavaScript.

You can create unlimited independent instances of a class, static methods are encapsulated within the class definition, and you can inherit from other classes, like like in Java and C++.

ES6 Classes are fully supported in modern browsers (and the shorthand function declarations), so they require zero-effort to implement.

What reason do you have to not use them?

For more in-depth information on ES6 classes, look at the breakdown of their properties by Mozilla.


I just released my new JavaScript library Downloadify.js, which makes it easy to give your users the right download link whether they’re on Windows, MacOS, or Linux. Give it a star on GitHub!

Thank you for reading! I am currently available for hire as landing page designer & developer. My portfolio page is currently under construction, but you can contact me directly at info@emmanuelmark.guru or see my case study on Medium for my last project.

If this helped you a short clap couldn’t hurt…