Javascript: Constructors, Methods, Properties, and Accessors in Class and Objects

As I mentioned in my last article that it is quite confusing for beginners to understand what is the difference between properties, methods, and 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 accessors.

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).

The constructor is a special function in JavaScript classes. While initializing the object using the new keyword, 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 let, var, 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 this keyword.

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 let, var or 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:

Methods

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.

Accessors

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: get and set a.k.a. getters and setters in JavaScript objects. These methods are simply properties that can be called. We can use accessors for the classes as well as objects.

Typically, getters look like .length of an Array. It returns the length of an array without passing any arguments:
someArr.length.

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.

Footnotes

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.