Let’s Learn The New Javascript ES6 Class Syntax

Video Tutorial

Getting Started

In this tutorial, we will try to dive into the ES6 Class world by knowing why using classes is so important on javascript applications since there were no classes on javascript before 2015'th version which has brought really important features to the basic javascript syntax, it actually depends on object on everything and classes are more like object so use them will give you more pattern choices as well as the ability to extend and develop more advanced applications.

Make sure to have a javascript development environment that supports ES6 you may want to check Babel for compiling ES6 code into ES5 for browsers support or you can simply use Codepen for faster development.

Or use simple node.js for running the javascript code as I’m going to do in this tutorial.

What is A Class

Classes on javascript are more like Objects they can have attributes and methods that interact with those attributes and there is no public and private attributes like other languages do in javascript everything is public and mutable but it is up to you to decide when to use variables as public or private, after defining the class you create an instance of that class then you can access class methods and attributes.

So to define a class you use the class keyword and you give it a name it is better to set the name of the class starts with a capital letter just as a convention, let’s define an Animal Class.

//Let define an Animal Class
class Animal {

   constructor(name) {
      this.name = name;
   }

}

As you can see it is very simple to define a class but here we are using the constructor to initiate the class whenever an instance of this class is created, take the constructor as the first method to be called automatically whenever the class is initiated (new instance) you usually would put and initialization code for your class under the constructor and as you can see in the code above we pass in the name of the animal as an argument.

The second thing to be noticed is setting the local variable, so to define attributes under the class you use this keyword which refers to the current class instance and you give it a name and a value, this is not only related to the constructor you can define any attributes in where on your class scope on any method but it is better to give it an initial value under the constructor then change it later.

Class Instance

It is actually very simple to initiate a class or create an instance if you are familiar with object constructing this should be very easy for you.

let Shark = new Animal("Shark");
//We give it a name since the constructor requires it

We use the new keyword to create a new instance and we give a name (Remember the Constructor).

You can access Class Attributes and Methods now through the instance

//Log name to the Console 
console.log("My name: ", Shark.name);

Class Methods

To add methods to the class just give a name and parentheses to make it know that this is a method and your definition

class Animal {
...
  spitName() {
    console.log(this.name);
  }
...
}

You access the spitName method through the class instance, you should get the animal name logged out for you.

Also there are static methods which have no relation to the class instance which means you don’t need to initiate the class in order to call static methods you can directly access them through the class Name also, you can’t access to class attributes or other methods on static methods since it doesn’t know about the instance which means it can’t use the this keyword under it.

...
   static whomAmI() {
     //Remember no class instance 
     console.log("Animal");
  }
...
//No instance is needed
Animal.whoAmI(); ///< Log: Animal

Javascript classes have also the ability to use set and get methods (more like attributes), as you should know that always accessing class attributes and changing them would be better to use a specific method for that (for ex: setName to change Name) and this is the setters and getters pattern which make your attributes mutable only by using the methods.

...
   set setName(name) {
      this.name = name;
   }

   get getName() {
      return this.name;
   }
...
//On the Class Instance you either change the name or get it's value
shark.setName = "Another Shark"; ///< This is not a Function so you don't use parentheses
//The same thing goes for the get 
console.log("My New Name: ", shark.getName);

You can learn more about javascript immutability to get a better understanding of why to use setters and getters.

Inheritance (Parent and Child)

Let’s say you have the Base Animal class that only has the spitName method and one attribute and you want to have multiple other classes that share the same thing with the base class but extends it methods and attributes, well you can extend a class from another class on ES6 where the child class takes the same as the base class but you can extend it.

//We have already defined the Animal Base Class
class Shark extends Animal {

   constructor(name, length) {
      //We should Call the base Class Contructor using the super function passing the name 
      super(name);
      //Store the Shark length under the Shark class Instance 
      this.length = length;
   }

   whatIsMyLength() {
      console.log("My Length: ", this.length);
   }

}
//Create an Instance 
let shark = new Shark("Shark", 3.5);
//We Can use the Base Animal Class Method since we are extending from it 
shark.spitName();
//As well as the newly added method 
shark.whatIsMyLength();

We use the extends key word for telling it to extend from whatever base class, for the child class constructor we need to construct the base class as well using the super function which calls the base class’s constructor.

The Instance of the new Child class we can access both the base class Methods and Attributes as well as the newly added ones which makes it very useful for you if you need on base class but different kind of animal (Animals only for this example).

What’s Next

ES6 is pretty nice, so make sure to learn and master it if you haven’t already and using classes in javascript is becoming a modern approach.

No Comments Yet