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