Understanding ES6 Classes

Introduction to ES6 Class

Classes in ES6 are mere syntactical Sugar that you can use to wrap around a function and it will look like a valid class declaration. We will see the comparison of each of the format and also review some samples using ES6 classes. This will give us a precise understanding of the ES6 Classes. Now let’s venture into the four topics that make this journey easy and admirable. We will be looking the three things mentioned below:-

1. Simple ES6 Class Declaration
2. Constructor in a Class
3. Extending one class to another using extends

Let’s get started seeing each of the above one at a time and get through the journey.

Simple ES6 Class Declaration

While declaration and instantiation are pretty easy. One must follow the syntax and see the resultant output that emerges from the code. Let’s have a look at the syntax and see how it works.

ES6

class ES6Classes{
  
}

ES5

"use strict";

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var ES6Classes = function ES6Classes() {
  _classCallCheck(this, ES6Classes);
};

The above code is the direct translation of the ES6 code. So now this ES5 direct translation can help you to get ahead with the understanding of the syntax. Now let’s have a look at the constructor for the same.

Constructor to a Class

The constructor for the ES6 class looks like the following. This is a pretty simple syntax. In this particular thing we are also referring to the instance variables along with the constructor.

ES6

class ES6Classes{
  
  // Instance Variables
  pointX=0;
  pointY=0;
  color='green';
  
  //Constructor with arguments
  constructor(pointX,pointY,color){
    this.pointX=pointX;
    this.pointY=pointY;
    this.color=color;
  }
}

ES5

'use strict';

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var ES6Classes =

//Constructor with arguments
function ES6Classes(pointX, pointY, color) {
  _classCallCheck(this, ES6Classes);

  this.pointX = 0;
  this.pointY = 0;
  this.color = 'green';

  this.pointX = pointX;
  this.pointY = pointY;
  this.color = color;
}

// Instance Variables
;

Now when you look into the code you can find the instance variables as well as the constructor with the parameters. Now, these parameters can help you to initialize the Object from the constructor. Let’s see how that works. It’s pretty simple in ES6.

ES6

var ES6ClassesObj1 =  new ES6Classes(1,2,'yellow')

This entire code turns out to be so simple. You can just instantiate pretty easy as mentioned above.The instance creation is just on a fly.

Extending Classes in ES6

Extending ES6 classes it is very easy, you just need to use the keyword extends in order to make the whole thing work. Let’s see a typical class extending the other one.

ES6

class Animal { 
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(this.name + ' makes a noise.');
  }
}

class Dog extends Animal {
  speak() {
    console.log(this.name + ' barks.');
  }
}

var d = new Dog('Mitzie');
d.speak(); // Mitzie barks.

See how the code extends class Animal to the Dog and then you can instantiate an object d from the class Dog. It’s so easy to visualize this out.

The above code might have made it easy for you to go through the ES6 classes and believe us it becomes easy each day as you move ahead with the series.

Originally published at The Web Juice.