A Guide To ES6 Classes

You might have noticed I have been writing about ES6 a lot lately. This is because I am excited about ES6 and thanks to the use of transpilers we can actually use it right now until browsers catch up.

What are Javascript classes?

In many ways, they are a sham. Javascript classes don’t really exist other than for cosmetic reasons. They are syntactic sugar over existing Javascript prototypical inheritance. The reason for this was to ensure backwards compatibility, classes merely give you a cleaner way to organise your code.

If you’re still confused, here is an example showing the ES6 way of writing a class and the ES5 way of doing the same thing (just not as pretty).

An example of ES5 and ES6 classes syntax

The ES6 way:

[code]
class someClass {
constructor(name, age) {
this.name = name;
this.age = age;
}

sayName() {
alert(this.name);
}

sayAge() {
alert(this.age);
}
}

var myInstance = new someClass(‘dwayne’, 27);
myInstance.sayName();
[/code]

Now for the ES5 way of writing a “class”

[code]
function someClass(name, age) {
this.name = name;
this.age = age;
}

someClass.prototype.sayName = function() {
alert(this.name);
}

someClass.prototype.sayAge = function() {
alert(this.age);
}

var myInstance = new someClass(‘dwayne’, 27);
myInstance.sayName();
[/code]

You can probably notice the differences between the two. We instantiate our classes the same way we would if we were building our code from an ES5 perspective, but there are a few subtle differences.

An example of ES6 class inheritance

[code]
class someClass {
constructor(name, age) {
this.name = name;
this.age = age;
}

sayName() {
alert(this.name);
}
}

class Child extends someClass {
constructor(name, age) {
super(name, age);
}

// Override the someClass method above
sayName() {
// This will call someClass.sayName() triggering the old alert
// Which will just display our name
super.sayName();

// This will trigger the new alert which has labels and our age
alert(‘Name:’ + this.name + ‘ Age:’ + this.age);
}
}

var myChild = new Child(‘dwayne’, 27);
myChild.sayName();
[/code]

As you can see, classes are extremely flexible especially when extending a base class and having the ability to easily override a parent method without needing to write any boilerplate logic to do so.

Introducing super()

In the ES6 classes syntax we have access to a function called super() which essentially just calls the parent function depending on the context and then returns the result. This isn’t a new premise, it exists in various forms and previously to achieve such functionality in Javascript required the use of call or apply.

Most use cases will just use the super() method inside of a class constructor. Calling super.parentMethodName() from within a child class will call the base class you inherited. If you inherited a class called ‘Core’ and your child class is called ‘AjaxComponent’ calling super.AjaxComponent() from within AjaxComponent’s constructor will call the parent constructor first.

There surprisingly is not a lot of documentation or examples out there currently that newbie developers can reference when working out when to use the super() method and where you should use it. So hopefully this clears up any confusion you might have around using this particular method in an ES6 class.

Why should I use ES6 classes?

Besides the obvious advantages of easier to read code? Being able to write well-structured Javascript that resembles a more realistic object-oriented programming language is a huge benefit. While Javascript classes are definitely not on the same scale as Java or C++, they are a step in the right direction as Javascript matures.

Classes at least for now are purely cosmetic, but there are plans to introduce object-oriented syntax like; static, public, private in ES7, but we’ll wait and see if they make the cut.

However, when coupled with a strong IDE and tooling, ES6 classes can be powerful in that they can be analysed by the IDE and we are given more options for tracing methods (especially when extending parent classes). My favourite ES6 capable IDE of choice is Webstorm which supports classes quite well.

You don’t realise how messy Javascript is until you work on a large-scale project comprised of more than two developers, ES6 classes come with all of the benefits of pre-existing prototypical inheritance, but require less typing and they make your code easier to understand and resemble closely an object-oriented programming language like Java and its approach to classes.

There really isn’t one reason I can think of to not use ES6 classes even if they are just syntactic sugar. They especially go hand-in-hand with ES6 modules functionality, but that will be for another post.

ES6 classes documentation & references

There are only a few resources out there on ES6 classes with only more to follow, here are a few helpful links to help you master them in your new God ES6 workflow.

An introduction to ES6 classes
Kangax ES6 Compatibility Table
ECMAScript 6 support in Mozilla
Use ECMAScript 6 Today