ES6 Classes in JavaScript | JavaScript Classes Private Variables | JavaScript Tutorial Series by SFDC Stop

Hello Trailblazers,

Welcome to the sixth tutorial in JavaScript Tutorial Series by SFDC Stop. In this tutorial, we're going to learn about ES6 classes in JavaScript. We'll see how we used to define classes in JavaScript before ES6 and how easy it is to define a class now using ES6 syntax. We'll also learn about defining private variables in JavaScript classes. This tutorial is published on SFDC Stop YouTube Channel. So, if you want to learn in detail, have a look at the tutorial video down below. Otherwise, you can scroll down to have a look at the code gist with explanation.

Tutorial Video

Code Gist with Explanation

How we used to create a class in JavaScript before ES6?

We're going to define a simple class named as Car. The code for the class is given below:

As you can see above, the class car is defined as a function itself because classses in JavaScript are special functions. It will receive two parameters inside the constructor: name and speed, which are parameters to the car function in the code. These two parameters name and speed are used to initialize two data members of the class with the same name i.e. name and speed. Note that the data members are referred by using this keyword.

After the constructor, we have a function named as showSpeed() which is used to display the speed of the car. This function belongs to the Car class, that is why we've used Car.prototype.<function-name> syntax to define the member function. This function can access the data members of the car by using the this keyword.

After the function definition, we simply created the instance of the car class named as audi and passed the name and speed of the car in the constructor as: audi and 200. Finally, we called our showSpeed() method to display the speed of the car by using the class instance. The output when we run this code is given below:

The code is executed successfully and we're getting the expected result i.e. 200 which is the speed of the car.

How can we now define a class in JavaScript using ES6 syntax?

Using ES6 we can define a class using class keyword and the constructor of the class can be defined using constructor keyword. Let's have a look at the same Car class but this time, it's defined using ES6 as shown below:

As you can see in the above code, this time we've defined a Car class using the class keyword. This syntax is very similar to other programming languages. Inside the class, we've defined a constructor by using the constructor keyword. This constructor is accepting two parameters: name and speed. The two data members name and speed of the class are referred using this keyword inside the constructor and are given the values passed inside the constructor. After that we've a function inside the class itself named as showSpeed() which is responsible to display the speed of the car.

The remaining code snippet is same, we've again created the instance of the Car class named as audi and passed the name and speed of the car in the constructor as: audi and 300. Finally, we called our showSpeed() method to display the speed of the car by using the class instance. The output when we run this code is given below:

As you can see above, we're getting the speed of the car displayed as 300 in the console.

Can we have private variables inside classes in JavaScript?

The answer is YES! You can define private variables inside classes in JavaScript. Let's have a look at the modified code snippet to understand how:

As you can see above, we have added one more parameter to the constructor of our class Car named as: color. This parameter is assigned to a new data member identified by #color which is also declared above in the class. Here # specifies that, the color data member is private. Also note that it's mandatory to declare the private data member in the class body, that's why we've declared it above at line number 3.

We've also created one more member function named as showColor() which is displaying the value of color data member. Below the class, we've added two statements at line number 22 and 23, where we're displaying the name and speed of the car audi by directly accessing the data members outside the class. We can do that because the data members are public and we can access the public data members directly outside the class. However, we also have a commented statement at line 24 where we're trying to access the color data member outside the class.

As we know, that the color data member is private, we cannot access it outside the class. You can give it a try by un-commenting the line and running the code snippet. You'll get an error as shown below:

If we comment that line again and try to access the color using the showColor() function which is called at the last, the code will work fine and you'll get the output as shown below:

So, as you can see above, we're getting the value 300 from showSpeed(), then we're getting the name and speed of the car by directly accessing the public variables outside the class with values: audi and 300. Finally, we're displaying the color of the car by using the showColor() which is displayed as red as it's the same color that we've passed in the constructor of the class.

To summarize, the learnings are given below:-

• Before ES6, we used to define a class by using the syntax of a function because classes in JavaScript are Special Functions. The member functions of the class were defined outside the classs function.
• ES6 made it very simple to define a class using the class keyword. We can define a constructor inside the class as well by using the constructor keyword. The member functions of the class can be defined inside the class body itself.
• We can also define private variables in a class. Private variables must be explicitly declared inside the class body and are prefixed by a #. They can only be accessed inside class member functions.

That's all for this tutorial. I hope you liked it. All the code used in this tutorial is available on GitHub and you can have a look at that by clicking here. Make sure to have a look at the video if you want to learn in detail and let me know your feedback in the comments down below.

Happy Trailblazing..!!