JavaScript object constructors allow us to build objects dynamically. They provide a convenient alternative to creating objects manually. They also provide a convenient way to initialize variables when creating objects.

In this article we’ll see how to create an object using JavaScript object constructor method, we’ll see also when exactly we can use this method to create objects.

To see the other methods to use to create an object check my tutorial: Understanding Javascript Objects.

1)- How to create an object using JavaScript object constructor method?

As in real life, an object has many properties.

If we take as an example a car, a car have properties such as color, weight, number of seats, speed, mileage, year of construction….

Same thing if we take a pen. A pen can have as properties color, price, ink….

In short, you can look at the properties as the things that describe the object.

On the other hand, there are methods.

The methods is what the object can do.

For example for the car, it can drive, it can stop, it can crash….

Same thing for the pen, it can write, it can break, it can dry…

So to create an object using the JavaScript constructor method the syntax will be:

JavaScript

function ObjectName(value1, value2, value3....){

        this.propertyName1=value1;
        
        this.propertyName2=value2;
        
        this.propertyName3=value3;
        
        this.method=function(){
        
              //action to perform
        
        }

}


var object1= new ObjectName(value1,value2,value3);

var object2= new ObjectName(value1,value2,value3);

var object3= new ObjectName(value1,value2,value3);

var object4= new ObjectName(value1,value2,value3);

var object5= new ObjectName(value1,value2,value3);

Let’s see in details what all this code means.

a)- Part 1 of the code:

The first part of the code is this one:

JavaScript

function ObjectName(value1, value2, value3....){

        this.propertyName1=value1;
        
        this.propertyName2=value2;
        
        this.propertyName3=value3;
        
        this.method=function(){
        
              //action to perform
        
        }

}

What is happening here is that we used the constructor object function to create a template for our objects.

Let’s say that we want to create many objects. For example 10 companies.

We know that all companies will have some properties in common. They will all have a name, they will all have employees, they will all have salaries, they will all have a cafeteria and so on….

So instead of creating each company apart, we will create a general or original object that will serve as a template for these companies.

This general object will have the common properties that all companies have. And this general object’s name is the constructor object.

If we have to name the constructor object “Company“, then the code will be:

JavaScript

function Company(value1, value2, value3....){

        this.propertyName1=value1;
        
        this.propertyName2=value2;
        
        this.propertyName3=value3;
        
        this.method=function(){
        
              //action to perform
        
        }

}

The “Company” constructor object will take some arguments. It can take as many arguments as you want, there are no limits.

But what do these arguments represent?

The arguments represent the values that we’re going to associate to the properties of the “Company” constructor object.

For example if the name is one of the company properties, then we’ll have to give a name to this company.

Same thing for employees, if the company has employees, we’ll have to say how many employees the company has.

As we don’t want the values to be static but dynamic, we will give a name to each value. So the constructor properties will be:

JavaScript

function Company(companyName, numberOfEmployees, numberOfCafeteria){

        this.propertyName1=value1;
        
        this.propertyName2=value2;
        
        this.propertyName3=value3;
        
        this.method=function(){
        
              //action to perform
        
        }

}

Now it is time to give a name to our properties.

We said that the company has a name, employeesNumber and cafeteriaNumber as properties. So we’ll name our properties this way. You can give the properties any name you want.

The code becomes:

JavaScript

function Company(companyName, numberOfEmployees, numberOfCafeteria){

        this.name=companyName;
        
        this.employeesNumber=numberOfEmployees;
        
        this.cafeteriaNumber=numberOfCafeteria;
        
        this.method=function(){
        
              //action to perform
        
        }

}

So here we gave a name to our properties and associated the values to the properties at the same time.

But wait, what does the keyword “this” mean?

What does the keyword “this” mean?

In this particular case, and when used with objects, this keyword refers to the object itself.

In other words, and simply, instead of this.name or this.employeesNumber you can see it as Company.name or Company.employeesNumber, which reminds us of the object literal notation.

So this replaces Company.

Now that we got this out of the way there is one last thing about the function constructor object and that is the constructor object function can have methods.

In other words, the object constructor function can have some functions that it will execute. And these functions are called methods.

Let’s go crazy and imagine that the Company talks, and whenever it pays the employees it says: “Yay! I finally paid my 5 employees” or

“Yay! I finally paid my 7 employees” or “Yay! I finally paid my 123 employees”, depending on the number of employees.

Let’s name the method “pay”, so the code becomes:

JavaScript

function Company(companyName, numberOfEmployees, numberOfCafeteria){

        this.name=companyName;
        
        this.employeesNumber=numberOfEmployees;
        
        this.cafeteriaNumber=numberOfCafeteria;
        
        this.pay=function(){
        
              return "Yay! I finally paid my " + this.employeesNumber + " employees";
        
        }

}

So here the name of the method is “pay” and we declared it with an anonymous function.

b)- Part 2 of the code

Now that our template is ready, it is time we create our 10 companies from it.

We said that the properties our 10 companies have are those our template has.

So to create a company, let’s call it “company1“, the code will be:

JavaScript


var company1= new Company("Google",150028,800);

Wow, what happened here? How does this code work?

What does the keyword “new” mean?

The keyword ‘new‘ simply means that you want to instantiate (create) a new object. So when you write: new Company() that simply means you want to create a new object using the “Company” object constructor. Which means using the template “Company“. So you call the object constructor function (as it is a function) using the keyword “new“.

Our object constructor “Company” accepts 3 arguments: companyName, numberOfEmployees and numberOfCafeteria.

So for the “company1” to have its own properties we have to replace these arguments with the real values of the “company1“.

Here “company1” has a name of Google, and a number of employees of 150028 and a number of cafeterias of 800, so we replaced the arguments of the constructor object with these values.

Behind the scenes this works as follow:

As we called the function constructor object “Company“, The arguments companyName, numberOfEmployees and numberOfCafeteria will be replaced with the values “Google”, “150028”, “800” like this:

Function construction object arguments replaced

As these values are associated to the properties, the properties will be:

JavaScript

function Company("Google", 150028, 800){

        this.name="Google";
        
        this.employeesNumber=150028;
        
        this.cafeteriaNumber=800;
        
        this.pay=function(){
        
              return "Yay! I finally paid my " + 150028 + " employees";
        
        }

}

That’s how the object “company1” is created from the function object constructor “Company“.

Now if we want to create the remaining 9 companies all we have to do is to call the object constructor function “Company” and pass it some values.

JavaScript

function Company(companyName, numberOfEmployees, numberOfCafeteria){

        this.name=companyName;
        
        this.employeesNumber=numberOfEmployees;
        
        this.cafeteriaNumber=numberOfCafeteria;
        
        this.pay=function(){
        
              return "Yay! I finally paid my " + this.employeesNumber + " employees";
        
        }

}


var company1= new Company("Google",150028,800);

var company2= new Company("Facebook",72000,523);

var company3= new Company("Apple",37000,400);

var company4= new Company("IBM",283000,265);

var company5= new Company("Microsoft",221000,300);

var company6= new Company("Tesla",110000,26);

var company7= new Company("Paypal",31000,36);

var company8= new Company("Twitter",13000,65);

var company9= new Company("Linkedin",21000,86);

var company10= new Company("Tiktok",1300,569);

2)- How to access objects properties and methods?

To access an object property or an object method, it is very simple. All you have to do is to use the dot notation.

Meaning the following syntax: objectName.property or objectName.method().

Let’s say that we want to display the number of employees of IBM as well as the name of the company.

So the code will be:

JavaScript

function Company(companyName, numberOfEmployees, numberOfCafeteria){

        this.name=companyName;
        
        this.employeesNumber=numberOfEmployees;
        
        this.cafeteriaNumber=numberOfCafeteria;
        
        this.pay=function(){
        
              return "Yay! I finally paid my " + this.employeesNumber + " employees";
        
        }

}


var company1= new Company("Google",150028,800);

var company2= new Company("Facebook",72000,523);

var company3= new Company("Apple",37000,400);

var company4= new Company("IBM",283000,265);

var company5= new Company("Microsoft",221000,300);

var company6= new Company("Tesla",110000,26);

var company7= new Company("Paypal",31000,36);

var company8= new Company("Twitter",13000,65);

var company9= new Company("Linkedin",21000,86);

var company10= new Company("Tiktok",1300,569);

console.log(company4.name + " has " + company4.employeesNumber + " employees in total");

In the browser console we’ll have:

Now let’s say we want to access the method “pay”. The code will be:

JavaScript

function Company(companyName, numberOfEmployees, numberOfCafeteria){

        this.name=companyName;
        
        this.employeesNumber=numberOfEmployees;
        
        this.cafeteriaNumber=numberOfCafeteria;
        
        this.pay=function(){
        
              return "Yay! I finally paid my " + this.employeesNumber + " employees";
        
        }

}


var company1= new Company("Google",150028,800);

var company2= new Company("Facebook",72000,523);

var company3= new Company("Apple",37000,400);

var company4= new Company("IBM",283000,265);

var company5= new Company("Microsoft",221000,300);

var company6= new Company("Tesla",110000,26);

var company7= new Company("Paypal",31000,36);

var company8= new Company("Twitter",13000,65);

var company9= new Company("Linkedin",21000,86);

var company10= new Company("Tiktok",1300,569);

console.log(company4.name + " has " + company4.employeesNumber + " employees in total");

console.log(company4.pay());

In the browser we’ll have:

3)- How to add properties and methods to an object?

Sometimes we want to add properties and methods to an object, that are specific to that particular object.

Let’s say here that although we created common properties to all the companies, we want to add a property that is specific to Tesla company and that does not exist in other companies, which is the type of car.

so to add a property to this company the code will be:

JavaScript

function Company(companyName, numberOfEmployees, numberOfCafeteria){

        this.name=companyName;
        
        this.employeesNumber=numberOfEmployees;
        
        this.cafeteriaNumber=numberOfCafeteria;
        
        this.pay=function(){
        
              return "Yay! I finally paid my " + this.employeesNumber + " employees";
        
        }

}


var company1= new Company("Google",150028,800);

var company2= new Company("Facebook",72000,523);

var company3= new Company("Apple",37000,400);

var company4= new Company("IBM",283000,265);

var company5= new Company("Microsoft",221000,300);

var company6= new Company("Tesla",110000,26);

var company7= new Company("Paypal",31000,36);

var company8= new Company("Twitter",13000,65);

var company9= new Company("Linkedin",21000,86);

var company10= new Company("Tiktok",1300,569);


company6.carType="Electric cars";

console.log(company6);

We used the exact notation as when we wanted to access the properties, which means the dot notation.

We added a property, its name is carType, and we gave it a value, which is Electrical cars.

Now if we display this in the browser we’ll have:

As you can see, carType has became now one of the company6 properties.

4)- Conclusion

Javascript has become very popular over the years because of its simplicity and ease of use. The language itself is quite simple and easy to master. However, sometimes it gets confusing when dealing with objects.

In this tutorial we’ve seen what an object constructor is and how to create it. The constructor function is a special method that allows you to define properties and methods on a newly created object. In other words, it lets you customize the behavior of a particular object at runtime.