ES6 for beginners - part 3 (Classes) 
Published: 2019-04-12 14:04:42

---
title: ES6 for beginners - part 3 (Classes) 
published: true
description: 
tags: 
cover_image: https://thepracticaldev.s3.amazonaws.com/i/dvbio7pgoh5l6epaoryp.png
canonical_url: https://www.2n.pl/blog/es-part-3
---
*I want to present the third part of the series "ES6 for beginners" created by one of our devs, Bartosz. You can find the previous parts [here](https://www.2n.pl/blog).*

Before we start discussing *Classes* in JavaScript, one thing needs to be explained. Classes in JavaScript are more like syntactic sugar than the new feature. Nevertheless, as in the case of Arrow Function about which I wrote in the [previous section](https://www.2n.pl/blog/es6-part-2), this is a facility worth remembering.

One of the worst parts in JavaScript is undoubtedly the inheritance system. JavaScript does not really have object inheritance, but something called prototypal inheritance. Class inheritance has been introduced to JavaScript due to the fact that it occurs in the vast majority of programming languages.

So what are *Classes* in JavaScript except for syntactic sugar, which leads to a more readable syntax? The answer is simple and the same as in other object-oriented programming languages. They are to create objects. They are like blueprints, on the basis of which objects are created. In addition, JavaScript classes are basically special functions.

The class declaration consists of two parts. The expression *class* and *class declaration*. Example below.
![](https://thepracticaldev.s3.amazonaws.com/i/7ysg1bnvap7ojicmsop9.png) 

Nothing complicated. But now let's look at what will happen as in the console *typeof Dog*.
![](https://thepracticaldev.s3.amazonaws.com/i/5jtsfekpuqms1nunk893.png)

Exactly as I mentioned. Our class is a function by which we will later create objects.

There are still a few things missing in our *Dog* class. The first one will be a *Constructor*. This is a special keyword used to initialize the object data. A *Constructor* can accept any number of parameters. In our example, we will create two (*name* and *height*). Then, using variable *this*, we will ensure that the arguments passed in the parameters will be saved in the variables. In our case, also with the same names. Of course, it is possible to name the classy property differently than the parameter, as in the example below, however, it is not very legible and not recommended.
![](https://thepracticaldev.s3.amazonaws.com/i/be32vu80yfq9vz7sh2t3.png)

![](https://thepracticaldev.s3.amazonaws.com/i/9ejbrlw1hytszxvm5yiw.png)

But let's return to the normal way of doing things.
![](https://thepracticaldev.s3.amazonaws.com/i/05g8oav9sxkrzntxfqbg.png)

Once we have a created class, we can boldly create any number of objects/instances of this class. The way we do it is as follows.
![](https://thepracticaldev.s3.amazonaws.com/i/rjtom5hvh7x4iu2t2ktx.png)

The name of our object in this example will be *Staffie*. Next, we pass to parameters that we defined in the constructor two arguments. The first *"Bur"* will be our *name*, the second *60* will be the *height*.
Also, we can create methods in classes. The method is just a function that is placed inside the class. So let's add a method that will return the sound of barking.
![](https://thepracticaldev.s3.amazonaws.com/i/ogx12n0caxx52m983le6.png)

Now our *Staffie* has the option of using this method. When we call the barking method in the console, we get:
![](https://thepracticaldev.s3.amazonaws.com/i/wdf2wyatrvowfohsxv18.png)

Since we know how to create classes, let's look at the *inheritance*. Since the dogs are divided not only by races but also groups, let's create a *Terrier* class that will inherit from the *Dog* class. It is also not complicated.
![](https://thepracticaldev.s3.amazonaws.com/i/0rs2pmd803eks82htdwb.png)

In the above example, we see that to be able to inherit from another class, we use the word *extends* + *the name of the class* from which we want to inherit. Besides, we see keyword *super*. It allows us using the special variable *this* and have access when creating an instance of the *Terrier* class to the *name* and *height* parameters which are inherited from *Dog* class.
Another thing that is often encountered is when we want to use our method *barking* in the case of Terriers. However, the returned value would be something different than in a regular dog.
![](https://thepracticaldev.s3.amazonaws.com/i/sb7g9qm47fo2oxrba22z.png)

As you can see, there is no magic in it. Now our terrier *Tommy* will be barking in a way that any self-respecting terrier does.
![](https://thepracticaldev.s3.amazonaws.com/i/tf0nelh4ho3axctjpehc.png)

Generally, convention from languages ​​like Java in which there is an object-oriented programming model also assumes holding classes in different files. Namely, instead of just like in our example one file with two classes, a better solution would be to transfer them to two separate files. Thanks to such a procedure, our code would become much more readable which is a great advantage when writing.

*Dog* class
![](https://thepracticaldev.s3.amazonaws.com/i/xxap5cezopvdbe9lmj07.png)

*Terrier* class
![](https://thepracticaldev.s3.amazonaws.com/i/gob44ogjy6bsqgbnk43s.png)

As you can see we used two keywords. *Import* and *Export*. As you probably already figured out what they are used for. I will only mention that you can export functions, objects, or primitive values from the module so other programs with the **import** statement can use them.

Another topic worth mentioning in this part is the static methods. So what are they exactly? First of all, they are created with a keyword static. The most important thing about them is that they are called directly on the class and are not callable on an instance of the class. Their purpose is to create a utility function.
![](https://thepracticaldev.s3.amazonaws.com/i/r9ztbnxo6rcqs6n33sr5.png)

We created an instance of *Dog* class and named it *Staffie* once again. Let's try to invoke both methods.
![](https://thepracticaldev.s3.amazonaws.com/i/03cejwaj59ckm4vz3b2g.png)

Ok, the method *barking* works as intended. Now let's invoke the second one.
![](https://thepracticaldev.s3.amazonaws.com/i/atydv8qnzsgpn63t0gif.png)

As you can see it works as intended too. We can't invoke a static function on the object. On another hand is it possible to invoke it on the class as its supposed to?
![](https://thepracticaldev.s3.amazonaws.com/i/cu2c2pve0sgujg5olkcp.png)

Great, it does.

So, did JavaScript after the introduction of the ES6 standard start to belong to languages ​​that use the Object-Oriented Programming (OOP) model? The answer is, it does not. JavaScript is still based on the Prototypal inheritance model.


In the next post we'll talk about rest & spread.