Javascript: Introduction to ES6 classes

An exciting new construct that was introduced in the ES6 specification is the ES6 classes. If you’re a Javascript developer, you will be aware that Javascript follows prototypal inheritance and sometimes it can get a little messy. However, with ES6 classes the syntax is simpler and much more intuitive.

Syntax

As with everything, a new concept is better understood with an example!

Let’s look at an example class created with the ES6 syntax:

class Animal{
  constructor(name, sound){
    this.name = name;
    this.sound = sound;
   }
 speak(){
  console.log(this.name + `${this.sound}`);
}
let dog = new Animal('Sprinkles', 'barks');
dog.speak(); 

The keywords introduced are: class, constructor

Now before we discuss what these keywords mean and what they do exactly, let’s see how we can create such a ‘class’ using a traditional function.

function Animal(name, sound){
 this.name = name;
 this.sound = sound;  
}
Animal.prototype.speak = function(){
 console.log(this.name + ' ' + this.sound); 
}
var dog = new Animal('Sprinkles', 'barks!');
dog.speak();

The above example uses a constructor function and the properties ‘name’ and ‘sound’ are set on the object using the ‘this’ keyword. We set a method on the prototype of the Animal function such that all Animal objects will inherit the ‘speak()’ method. Both examples achieve the same thing. In fact, if you create an object of Animal written in ES6-style and run this

typeof Animal; // function 

Yes! it returns ‘function’. Javascript hasn’t even added a new type to the language. The ES6 class is just an elegant way to do the same thing.

Now let’s see what are the differences that we can draw syntactically from the two examples:

In the ES6 way,

1. The function keyword is replaced with the class keyword
2. There’s a special function named ‘constructor’ where the initialization of the object is done. Hence whatever is present in the body of the traditional function gets shifted to the ‘constructor’ function. This method is called whenever a new object of that ‘class’ is created.
3. The speak() method is a part of the class body and it is considered a ‘member’ of the class.

The static method

class Animal{
 constructor(name, sound){
 this.name = name;
 this.sound = sound;
 }
 speak(){
  console.log(this.name + this.sound);
 }
 static allSpeak(animals){
  for(animal of animals){
   console.log(animal.name + animal.sound); 
  }
 } 
}
Animal.allSpeak(animal1, animal2, animal3);

The static keyword allows you to set a method on the ‘class’ itself and not the object. The static method is directly accessed with the class name instead of the object. It throws an error if it’s called with an object.

You may ask what’s the point of classes? It is just an alternative syntax to achieve the same thing, but I beg to differ. The ES6 class offers a ton of benefits.

Benefits of classes

1. Less code setup — Who doesn’t want to write less code? With ES6 classes the code to write a function is much lesser compared to the traditional method.
2. Constructor function — it provides a clear function to create objects.
3. All the logic is contained — You can clearly specify the methods and properties in one place instead of creating one constructor function and defining methods on the prototype one-by-one.

Things to remember about ES6 classes

1. There’s no magic — The Javascript class must not be confused with the object-oriented features provided by other class-based languages like Java, C++ etc.
2. The class is just an illusion — Javascript did not add any additional features. It still follows prototypal inheritance under the hood.
3. The classes require the use of new keyword — Whenever instantiating an object of a class, the new keyword must be used.

The super and extends keywords

You can create a subclass or a child class using the ‘extends’ keyword. The child class can add its own logic along with the data inherited from the ‘base’ class.

class Animal {
 constructor(){
  this.name = name;
 }
 speak(){
 console.log(this.name + ' makes a noise.');
 }
}
class Dog extends Animal {
 constructor(name, sound = 'noise'){
  super(name);
  this.sound = sound;
 speak() {
  console.log(this.name + this.sound);
 }
}
let doge = new Dog('Barnacles');
doge.speak(); // Barnacles barks 

In the above example, the subclass ‘Dog’ overrides the speak() method and defines its own. The ‘super’ keyword is used to call the base class’s constructor function. Remember if the subclass has a constructor then the first line should be the call to super() before doing anything else. If you don’t call super then it will throw an error!

So, this concludes the introduction to ES6 classes; You are encouraged to dig deeper and explore the MDN docs to get a better grasp on ‘classes’. I hope you guys enjoyed reading this one I sure enjoyed writing it. As always, happy coding!