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

ES5

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

ES5

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

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

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.


Also published on Medium.

Join our 2500+ fellow readers

Join our 2500+ fellow readers

Joining our mailing list will for sure keep you at the top of Web Development Ecosystem. Connect with us and also other fellow developers.

You have Successfully Subscribed!

Pin It on Pinterest

Share This