JavaScript Constructor Functions

Before ES6 Classes, JavaScript used Constructor Functions to create multiple objects with the same structure.

Important:

ES6 Classes are built on top of
Constructor Functions and Prototypes

Understanding Constructor Functions helps you understand how JavaScript works internally.

What is a Constructor Function?

A Constructor Function is a special function used to create objects.

Example:

function User(name, age) {

    this.name = name;
    this.age = age;

}

Create Object:

const user =
new User("Venu", 35);

Output:

{
    name: "Venu",
    age: 35
}
Why Do We Need Constructor Functions?

Without Constructor Function:

const user1 = {
    name: "Venu",
    age: 35
};

const user2 = {
    name: "John",
    age: 30
};

Problem:

Duplicate Code
Hard Maintenance

Solution:

function User(name, age) {

    this.name = name;
    this.age = age;

}

Create multiple objects easily.

Constructor Function Syntax
function User(name, age) {

    this.name = name;
    this.age = age;

}

Convention:

Constructor Names Start
With Capital Letter

Examples:

User
Employee
Account
Customer
Creating Objects
const user1 =
new User("Venu", 35);

const user2 =
new User("John", 30);

Result:

user1.name // Venu

user2.name // John
What Happens When new Is Used?
const user =
new User("Venu", 35);

JavaScript performs:

Step 1

Create empty object

{}
Step 2

Assign this

this = {}
Step 3

Execute constructor

this.name = "Venu";
this.age = 35;
Step 4

Return object

{
    name: "Venu",
    age: 35
}
new Keyword Flow
new User()
     |
     v
Create Empty Object
     |
     v
Assign this
     |
     v
Execute Function
     |
     v
Return Object
Adding Methods
function User(name) {

    this.name = name;

    this.greet = function() {

        console.log(
            `Hello ${this.name}`
        );

    };

}

Usage:

const user =
new User("Venu");

user.greet();

Output:

Hello Venu
Problem With Methods
const user1 =
new User("Venu");

const user2 =
new User("John");

Memory:

user1.greet()

user2.greet()

Each object gets its own copy.

Not efficient.

Using Prototype

Better approach:

function User(name) {

    this.name = name;

}

Shared Method:

User.prototype.greet =
function() {

    console.log(
        `Hello ${this.name}`
    );

};

Usage:

const user =
new User("Venu");

user.greet();
Prototype Diagram
user
 |
 v
User.prototype
 |
 +-- greet()
 |
 v
Object.prototype
 |
 v
null

All objects share one method.

Constructor Property

Every prototype has a constructor reference.

function User() {}

console.log(
    User.prototype.constructor
);

Output:

User
Checking Instance Type
const user =
new User("Venu");
console.log(
    user instanceof User
);

Output:

true
Real World Example
function Employee(
    name,
    department
) {

    this.name = name;
    this.department = department;

}

Method:

Employee.prototype.display =
function() {

    return `${this.name}
            - ${this.department}`;

};

Usage:

const emp =
new Employee(
    "Venu",
    "Engineering"
);
Constructor Function Inheritance

Parent:

function Animal(name) {

    this.name = name;

}

Method:

Animal.prototype.eat =
function() {

    console.log("Eating");

};
Child Constructor
function Dog(name) {

    Animal.call(
        this,
        name
    );

}

Inheritance:

Dog.prototype =
Object.create(
    Animal.prototype
);

Usage:

const dog =
new Dog("Tommy");

dog.eat();

Output:

Eating
Constructor Inheritance Diagram
dog
 |
 v
Dog.prototype
 |
 v
Animal.prototype
 |
 v
Object.prototype
 |
 v
null
Constructor Functions vs Classes
Constructor Function
function User(name) {

    this.name = name;

}
ES6 Class
class User {

    constructor(name) {

        this.name = name;

    }

}

Both create similar objects.

Common Mistakes
Forgetting new

Wrong:

const user =
User("Venu");

Correct:

const user =
new User("Venu");
Defining Methods Inside Constructor

Bad:

this.greet =
function(){};

Every object gets a copy.

Prefer:

User.prototype.greet =
function(){};
Using Arrow Functions as Constructor

Wrong:

const User = (name) => {

    this.name = name;

};

Arrow functions cannot be constructors.

Best Practices
Use ES6 Classes for modern applications.
Understand Constructor Functions for interviews.
Place shared methods on prototype.
Always use new.
Keep constructors simple.
Interview Questions
What is a Constructor Function?

A function used to create objects using the new keyword.

Why Are Constructor Names Capitalized?

Convention to indicate they should be used with new.

What Does new Do?
1. Create Object

2. Assign this

3. Execute Function

4. Return Object
Why Use Prototype Methods?

To avoid creating duplicate method copies for every object.

Can Arrow Functions Be Constructors?

No.

They do not support new.

Difference Between Constructor Functions and Classes?
Constructor Function
Old Syntax

Class
Modern Syntax

Both use prototypes internally.

Cheat Sheet
Constructor Function
--------------------
Creates Objects

Syntax
------
function User(){}

Usage
-----
new User()

new Keyword
-----------
Create Object
Assign this
Execute Function
Return Object

Best Practice
-------------
Use Prototype For Methods

Modern Alternative
------------------
ES6 Classes
Summary

Constructor Functions were the original way to create reusable object blueprints in JavaScript.

Key Concepts:

Constructor Functions
new Keyword
this Keyword
Prototype Methods
Constructor Property
Inheritance
Object Creation Flow

Understanding Constructor Functions is essential before learning:

Prototypes
ES6 Classes
Inheritance
JavaScript Internals

They remain one of the most frequently asked JavaScript interview topics.