por Classes are a fundamental concept when we want to create projects with a more solid and durable architecture than single functions. This concept is built around the constructor of a class, an idea sometimes difficult to understand. In this post, we will teach you what is the constructor of a class in JavaScript to strengthen your knowledge about object orientation in this language.
What is the constructor of a class in JavaScript?
The constructor of a class in JavaScript is a special method that allows us to create and initialize objects derived from a new instance of a class. If you have doubts about the concept of an instance, we recommend you read our post on classes and instances in JavaScript.
The constructor method will receive as a parameter the property or properties that we decide are essential for the operation of the class. That is to say, The essentials of a class will always be inside its constructor, since it makes this element exist since the creation of the class. So if we were creating a class car, It would be essential that the property keys is in your manufacturer, because without them you cannot open, start and drive the car.
An ideal example for a constructor of a class in JavaScript is to think that we are creating an MVC pattern controller. So, since one of its functions is to execute actions on a DOM node, this element will be the perfect parameter to insert into the constructor method.
Being a special method, the constructor must always be inserted inside a class. Below we give an example:
class TweetListController {
constructor (text) {
console.log(«TweetListController constructor:», text);
}
}
The above lines of code define a class called TweetListControllerin which the constructor receives a property text. Within this class, we also have a command console.log that paints a phrase or string and the text received by the constructor.
It is very important to focus on determining the ideal parameter to pass through the constructor of a class in JavaScript. This It should be based on the role of the class we are creating. That is, for example, a constructor of a controller should not receive the model data as a parameter, since part of what a controller does in the MVC pattern is to manage the obtaining of said data, receiving them as a parameter requires that they are already managed previously. .
How does it work?
As we mentioned before, the constructor of a class in JavaScript is declared within the class. Now, in addition to declaring the constructor and its parameters, The next step is usually to define these parameters as properties of the class. To do this, we use the keyword Este and we give it a property name. We then set this equal to the desired parameter. Below, we give you an example with the created class:
class TweetListController {
constructor (text) {
this.constructornumber = text
console.log(«TweetListController constructor:», text);
}
}
Constructor and instances
The constructor method It is put into action when we create a new instance of our class. That is, it is executed from outside the created class. So, suppose we have the following instances of the above class:
const controller1 = new TweetListController(1);
const controller2 = new TweetListController(2);
const controller3 = new TweetListController(3);
const controller4 = new TweetListController(4);
With the different previous instances we are executing the constructor of a class and passing different values to be processed as its parameter.
That is, when we create the instance controller1 and we pass the number 1 as the value of the class, the constructor of TweetListControler receives this value as the property text and it returns the following to us through the console:
TweetListController constructor: 1
The constructor can only be executed when we create a new instance of a class (a new about the class name). In this sense, it is very important to keep in mind that, In classes, the constructor is only executed once. This means that, in our example, the console.log our code will never exit again for any of the instances controllerx.
Do you dare to continue learning?
After reading this post, you know exactly what a class constructor is in JavaScript and how it works. However, there is still a lot to learn about this and other fundamental programming languages for web development. For this reason, we recommend our Full Stack Web Development Bootcamp, where you will learn in depth how to work with tools and languages such as JavaScript, HTML, CSS and JSX. Do you dare to continue learning with us? Don’t hesitate to ask for more information!