JavaScript Constructor Functions

What is a Constructor Function?

A Constructor Function is a regular JavaScript function used with the new keyword to create and initialize multiple objects with the same structure.

It acts like a blueprint for creating objects.

By convention, constructor function names start with a capital letter.

Syntax

function ConstructorName(parameter1, parameter2) {

    this.property1 = parameter1;

    this.property2 = parameter2;

}

Example

function Employee(name, salary) {

    this.name = name;

    this.salary = salary;

}



const emp1 = new Employee("Saravanan", 50000);



console.log(emp1);

Output

Employee {

    name: "Saravanan",

    salary: 50000

}

How the new Keyword Works

When JavaScript executes:

const emp1 = new Employee("Saravanan", 50000);

it performs the following steps automatically:

Step 1: Creates an Empty Object

{}

Step 2: Sets this to the New Object

this = {}

Step 3: Executes the Constructor Function

this.name = "Saravanan";

this.salary = 50000;

Result:

{

    name: "Saravanan",

    salary: 50000

}

Step 4: Returns the Object Automatically

return this;

Understanding this

Inside a constructor function, this refers to the newly created object.

function Employee(name) {

    this.name = name;

}



const emp1 = new Employee("Saravanan");

Internally:

emp1.name = "Saravanan";

The property name is on the left side and the value comes from the parameter on the right side.

this.name = name;

Creating Multiple Objects

function Employee(name, salary) {

    this.name = name;

    this.salary = salary;

}



const emp1 = new Employee("Ram", 50000);

const emp2 = new Employee("Kumar", 60000);

const emp3 = new Employee("Ajay", 70000);

All objects follow the same structure.

Adding Methods

Constructor functions can also contain methods.

function Employee(name, salary) {

    this.name = name;

    this.salary = salary;



    this.displayInfo = function() {

        console.log(this.name + " earns " + this.salary);

    };

}



const emp1 = new Employee("Saravanan", 50000);



emp1.displayInfo();

Output

Saravanan earns 50000

CRUD Operations on Constructor Function Objects

Objects created using constructor functions behave like normal JavaScript objects.

Create

emp1.age = 26;

Read

console.log(emp1.age);

Update

emp1.age = 27;

Delete

delete emp1.age;

Adding Properties to One Object

emp1.department = "IT";

Only emp1 receives the property.

Adding Properties for All Objects Using Prototype

Employee.prototype.company = "TCS";

Now all Employee objects can access the property.

console.log(emp1.company);

console.log(emp2.company);

Output

TCS

TCS

Adding Shared Methods Using Prototype

Employee.prototype.greet = function() {

    console.log("Hello " + this.name);

};

Now every Employee object can use the same method.

emp1.greet();

emp2.greet();

This approach is more memory-efficient because only one copy of the function exists.

Constructor Function vs Object Literal

Object Literal

const employee = {

    name: "Ram",

    salary: 50000

};

Best when creating a single object.

Constructor Function

function Employee(name, salary) {

    this.name = name;

    this.salary = salary;

}

Best when creating multiple objects with the same structure.

References:

https://www.w3schools.com/js/js_object_constructors.asp

https://www.geeksforgeeks.org/javascript/javascript-function-constructor/

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/Function