Javascript Constructor functions and the new Operator with examples


In this tutorial, you will learn about the JavaScript constructor function and and the new Operator .how to use the new operator keyword objects.

In  OOPs programming, before objects are created a very limited way and we did was to use some simple object literal, and now that all changes with constructor functions.

A difference between a regular function and a constructor function is that we call a constructor function with the new operator. OK, Let's go into details.

In JavaScript, A constructor is a special function used to create an object instance of a class.



'use strict';

// constructor function

const User = function (firstName, lastName)
{
this.firstName = firstName;
this.lastName = lastName;
}

//create an object

const User = new User ('chandra' ,'kumar');



console.log(User);


Output:


chandra kumar



In the above, the constructor is used to create a new object and set values of an existing object and the JavaScript calls the constructor when the object is created using the new keyword. And the name of a constructor function is starts with a capital letter.

In the example, we are creating a new user object with two properties firstName and lastName. In the process the constructor invokes in JavaScript, the operation creates a new empty object.


Read also:

Javascript to change the background colour font checkbox

what is domain and web hosting

How to buy best wordpress hosting plan

8 Best Free Keyword Research Tools for SEO

write a code to retrieve data from table into a datagridview in csharp


When we use this keyword in the JavaScript constructor, it refers to the new object and becomes the current instance object.

 

Create Multiple objects:


We can use this constructor function to create as many different objects as we want to create objects based on this new User1, User2, and User3 operator following a constructor function. Now the blueprint will be the actual User function and each of them is its own new object that we created programmatically, using a constructor function. 


// constructor function

const User = function User (firstName,lastName) 
{
this.firstName = firstName;
this.lastName = lastName;
}


// create objects

const User1 = new User('Anbu', 'mannan');
const User2 = new User('GTR' , 'Aravindh');
const User3 = new User('chandra' ,'kumar');

console.log(User1,User2,User3); 




Javascript Constructor functions and the new Operator with examples



So this is the basics of constructor functions and now above code, we give them the exact same name as the parameters that we're passing in here firstName and lastName in the User function, and then automatically returned data from the constructor function.

 


const User = function User (firstName,lastName,age) 
{
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}
// create objects
const User1 = new User('Anbu', 'mannan', 25);
const User2 = new User('GTR' , 'Aravindh',26);
const User3 = new User('chandra' ,'kumar',21);

console.log(User1.firstName,User2,User3); 


Output:


Anbu

User
firstName : "GTR"
lastName : "Aravindh"
[[prototype]]:Object

User
firstName : "chandra"
lastName : "kumar"
[[prototype]]:Object



Create JavaScript Object Prototype:


Use properties and methods to a constructor function using a prototype. For example,

In the below code, add a new property age is added to the constructor using a prototype. It is shared the age to all the User object and output return age is same.

 




const User = function User (firstName,lastName,age) 
{
this.firstName = firstName;
this.lastName = lastName;

}
// create objects
const User1 = new User('Anbu', 'mannan');
const User2 = new User('GTR' , 'Aravindh');
const User3 = new User('chandra' ,'kumar');

User.prototype.age = 21;

console.log(User1.age,User2.age,User3.age); 



Output:

21  21  21


I hope you will learn how to create a JavaScript constructor function and the new Operator with example used to create many different objects and new operators.

Post a Comment

Previous Post Next Post