Object constructor functions: How does the Javascript constructor work?

Leave a Comment / JS / By Salma Aboumerouane / November 15, 2022 December 1, 2022

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:

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:

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:

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:

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:

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:

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:

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:

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

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.

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:

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:

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:

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.

Read More

How to use ChatGPT OpenAI API V4 With Node JS: model gpt-3.5-turbo Book Summary

Salma Aboumerouane August 26, 2023 No Comments

In this tutorial we will learn how to use the OpenAI API with the GPT-3.5-turbo/…

Read More

Javascript Promise: A Beginner’s Guide to Asynchronous Programming

Salma Aboumerouane June 26, 2023 No Comments

Promises are a powerful feature of JavaScript that allows us to handle asynchronous operations in…

Read More

How to Use Callback Functions in JavaScript: A Complete Guide with Examples and Best Practices

Salma Aboumerouane April 26, 2023 No Comments

Callbacks are a fundamental concept in JavaScript and are used extensively in modern web development….

Read More

JavaScript Date: Get Date methods

Salma Aboumerouane December 25, 2022 No Comments

To create and manipulate a particular date, we will have to create a date type…

Read More

JavaScript Date: Create Dates in JavaScript

Salma Aboumerouane December 19, 2022 No Comments

What does the JavaScript Date constructor do? How can I use it? What are its…

Read More

5 ways to declare a function in JavaScript

Salma Aboumerouane December 1, 2022 No Comments

JavaScript functions are used to perform actions when certain events occur. They are also called…

Read More