As I mentioned in my last article that it is quite confusing for beginners to understand what is the difference between
variables in a class, so in this article, we'll discuss them in detail, and some other functionalities of the class and objects. We'll also see how to implement
constructors in ES6 classes and how it became just syntactic sugar after the release of ES10. Also, We'll see how we can implement getters and setters using
Constructors and Properties
Let's start with the
constructors. You cannot have constructors in JSON objects, but it is an essential feature of the classes. The
class keyword was first introduced in ES6 and just like any other object-oriented language, they introduced
constructors (a method inside a class for our convenience, check this article to see how it used to be in the past).
newkeyword, it first executes its constructor (if there is any). It can take arguments which are passed while initialization and bind them with the class' properties.
Let's have a look at the example below. In this example, there is a class named
Person, and we want to add the default name property to it. We cannot use
const keywords to declare variables inside a class. Even if we can, they're useless outside that class declaration as we can't bind them with each instance of that class. So now we know that we can't declare any variables inside a class (you can have it inside the methods of the class though), but to have this feature, we can use its
properties by binding them with
After ES10 (currently in TC39 stage 3), if we just want to bind the properties with
this, we don't really need a
constructor. Instead, we can directly declare them like this.
Still, we're not using any of
const. And, this automatically binds it with
this, and we can access it using this.name. Although we have this shortcut for constructors, it doesn't make them useless. At this time, there is no way we can directly pass arguments to the class without using constructors. That means, if we want to initialize an object by passing arguments, we have to use constructors like this:
A method contains a sequence of instructions and whenever we call a method, it starts executing these instructions line by line. Also, these methods are associated with the instance of this class. We can define methods just like we defined the constructor above and we can write our logic inside its scope.
Now, to access a method using an object, we have to add
.methodName(arguments). Here, methodName is the name of your method and you can pass the required arguments.
Unlike constructors, you can define your methods inside a JSON object and the rest is the same.
Did you notice that every time we call a method to get or set the data, we have to add parentheses even if it doesn't take any argument? Sometimes, it's a bit frustrating if we're dealing with the objects because we can also set the properties directly by assigning values. To solve this problem to some extent, we have a couple of accessor methods:
Typically, getters look like
.length of an Array. It returns the length of an array without passing any arguments:
And, setters look like
window.location. We can assign it some value and then it sets/redirects the current browser tab's URL:
window.location = 'http://example.com'
Let's see the implementation to make things clear.
I hope you've understood all the things if you were not able to understand from my last article because of their complexity. Still, if you have any doubts or any suggestions/ideas to improve this, don't hesitate to add a comment below.