Introduction
Hey Ninjas!!, Today we'll be talking about new constructor operator in JavaScript. But before we start, let's talk about what a constructor is.
Also See, Javascript hasOwnProperty
Constructors
A constructor is a particular type of function used to initialize attributes on creating an object of the class. In simpler words, when you create an object of a class, you are supposed to initialize all the attributes of the objects, which is done using the constructor.
There are different types of constructors: Parameterized, Default, etc. If you want to know more about them, click here.
Different programming languages have other methods of creating constructors. Here we will focus on JavaScript and how to create a new class object.
Here is a workflow of how JavaScript works when creating a new object.
This Keyword
You may have come across this object when working with any object-oriented programming language. For those of you who are not familiar with this object, here’s a brief intro about this.
‘this’ is an object which is defined inside a class or a function and is locally scoped inside the body. It is returned by default, from a constructor, or from a function when called as a constructor.
Now that you are familiar with these topics. Let’s get started with the ‘new’ keyword in JavaScript, and how it is used to create a new object of a class or function, and how it relates to a constructor.
New Keyword
One can always create a new JavaScript object via {...} spread operator. Still, there are times when you want to create a new JavaScript object entirely rather than inheriting attributes from the existing objects.
So to create a new object, the new operator comes in handy. Here we will look into all the different functionalities of the new keyword.
Creating New Objects From Constructors
It creates new objects of any class defined in the JavaScript code. For declaring a constructor in JavaScript, we have to follow some guidelines:
- The function name should start with a Captial Letter
-
Use the keyword new before the constructor call.
Let's look at some examples to get a clear picture.
class Animal {
constructor(breed, petName, diet) {
// Creates a object called this
// this = {}
// Constructor assigns the attributes to the this object
this.breed = breed;
this.petName = petName;
this.diet = diet;
// Now the value of this object becomes
// this = {breed:breed, petName:petName, diet:diet}
// return this
}
}
let cat = new Animal("Cat", "Tom", "Milk");
console.log(cat);
Output
Explanation
As you can see, we created a new object with the help of a new operator. This object belongs to the class Animal defined above. The Animal class has three attributes defined(declared with this object), i.e., breed, petName, and diet, which are initialized with the help of the constructor.
Now let's understand the work behind the operator.
-
When we call the constructor using the new operator, it creates a new empty object inside the class with the name this. As seen above, when we create a new object of Animal class, we create a this object of the class, and the attributes are initialized with values passed.
-
It then adds the attributes/properties to this object. The values are passed as arguments to the function call. Now the value the attributes are breed: “Cat”, petName: “Tom”, diet: “Milk”.
-
The JavaScript object is created with the class and returned from the constructor. Here the constructor returns the this object, defined in the Animal class.
But here's a doubt that users frequently ask. Why should one follow the above typical code when one can create an object using this simple code?
let animal = {
breed: "Cat",
petName: "Tom",
diet: "Milk",
};
The reason behind using the new operator over creating an object is that, what happens when you are supposed to create 5-6 animal objects with the same attributes?
You will create such individual objects for 5-6 times, which will result in increasing the line of code and won’t look good.
Instead, we create one class to define all the attributes, which helps in creating JavaScript objects in a single line via the new operator.
Target Attribute Of New
Have you ever wondered, what happens when you call a constructor or a function?
For instance, when you see a function call, how does JavaScript know that the function was called as a constructor and not as a general function call?
Don't worry; we got you covered; here's how JavaScript works.
It attaches a target property/attribute when called with the new operator. So you can access new when you call any function, as a constructor, inside the function body, with new.target. If it is undefined, then the function call was simple, else it was called as a constructor (accompanied by the new operator).
function sayHello(){
console.log(new.target)
}
sayHello()
Output
Now when we call the function with the new keyword, we get the object of type function sayHello.
function sayHello(){
console.log(new.target)
}
new sayHello()
Output
Explanation
As you can see, when the function was called as a constructor, i.e., when called with the new keyword, the new.target attribute is defined with the function declaration. When the function was called without the new keyword, the new.target attribute was not defined; hence undefined was returned.
Return Object Explicitly From Constructor
As discussed above, from behind the scenes, the constructor returns this object. But what happens when you try to return an object from a constructor explicitly?
Yes, you guessed it correctly, the constructor returns the explicitly defined object.
So when we reach the end of the constructor, JavaScript searches for the return statement; if we are returning any other object, the constructor returns the explicitly defined object; otherwise, it returns this JavaScript object.
class Animal {
constructor(breed, petName, diet) {
// Creates a object called this
// this = {}
// Assigns the attributes to the object
this.breed = breed;
this.petName = petName;
this.diet = diet;
// If no return statement present, then returns this object
// Else returns that object
return { breed: "Cow", petName: "Mohan" };
}
}
let cat = new Animal("Cat", "Tom", "Milk");
console.log(cat);
Output
Explanation
As you can see in the above code, there is an explicitly defined object inside the constructor, so the constructor returns that newly defined object instead of this object.
Methods inside Constructor
Apart from attributes/properties, constructors can also have methods as member objects.
Methods are member functions for the class defined above. It is a property containing a function definition.
We can assign any method to this object and then call the method using the object. This helps in increasing the functionality of the class.
class Animal {
constructor(breed, petName, diet) {
// Creates a object called this
// this = {}
// Assigns the attributes to the object
this.breed = breed;
this.setName = function (name) {
this.petName = name;
};
// Return this object
}
}
let cat = new Animal("Cat", "Tom", "Milk");
cat.setName("tom");
console.log(cat);
Output
Explanation
As you can see, we have defined a member function called setName, and have assigned it to this object. So when we call the member function using the object’s class, the function call is executed, and an attribute called petName is initialized with this object, with the value of “tom”.
So now, when you access the attribute petName, you get “tom” as output.
85+ registered