❮ Previous Next ❯

Constructors

  • Learn how constructor functions and class constructors initialize objects.

  • Introduction to Constructors

    In Object-Oriented Programming, constructors play a very important role.

    Whenever we create an object, we usually want to:

    • Assign initial values

    • Set default properties

    • Prepare the object for use

    This initialization work is done using constructors.

    In JavaScript, constructors can be created in two ways:

    1. Constructor Function

    2. Class Constructor (constructor( ))

    Constructor Function

    What Is a Constructor Function ?

    A constructor function is a regular JavaScript function used to create multiple objects with the same structure and behavior.

    It works as a blueprint before ES6 classes were introduced.

    Key Rules of Constructor Functions

    1. Function name starts with a capital letter

    2. Used with the new keyword

    3. Uses this to assign properties

    4. Creates objects automatically

    Syntax of Constructor Function

    function ConstructorName(parameters) {

      this.property = value;

    }

Constructor Function Example

Uses a function to create objects with properties and methods. 

function Student(name, age) {
  this.name = name;
  this.age = age;
  this.displayInfo = function () {
    console.log("Name:", this.name, "Age:", this.age);
  };
}

  • Creating Objects Using Constructor Function

    let student1 = new Student("Rahul", 20);

    let student2 = new Student("Anita", 22);

    What Happens When new Is Used ?

    When we use the new keyword:

    1. A new empty object is created

    2. this refers to that new object

    3. Properties are attached to this

    4. Object is returned automatically

    Without new Keyword (Common Mistake)

    let s = Student("Amit", 21);

    Problem:

    • this refers to global object

    • Can cause bugs

    Always use new with constructor functions.

    Memory Issue with Constructor Functions

    Each object creates its own copy of methods.

    this.displayInfo = function () { ... }

    This can waste memory.

Prototype Method Example

Uses prototype to share methods across all objects efficiently. 

function Student(name, age) {
  this.name = name;
  this.age = age;
}

Student.prototype.displayInfo = function () {
  console.log(this.name, this.age);
};

  • Now the method is shared by all objects.

    Class Constructor (constructor())

    What Is a Class Constructor ?

    In ES6, JavaScript introduced classes, which provide a cleaner and more readable syntax.

    The constructor() is a special method inside a class that:

    • Runs automatically when an object is created

    • Initializes object properties

    Syntax of Class Constructor

    class ClassName {

      constructor(parameters) {

        this.property = value;

      }

    }

Class with Constructor Example

Defines a class with a constructor and a method to display object data. 

class Student {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  displayInfo() {
    console.log("Name:", this.name, "Age:", this.age);
  }
}

  • Creating Objects Using Class Constructor

    let s1 = new Student("Rohit", 19);

    let s2 = new Student("Neha", 21);


    s1.displayInfo();

    s2.displayInfo();


    Important Rules for Class Constructors

    1. Constructor name must be constructor

    2. Only one constructor allowed per class

    3. Constructor runs automatically

    4. new keyword is mandatory

    Class Without Constructor

    If no constructor is written, JavaScript provides a default constructor.

Object Method Call Example

Creates an object from a class and calls its method. 

class Demo {
  sayHello() {
    console.log("Hello");
  }
}

let d = new Demo();
d.sayHello();

Constructor Default Values Example

Uses default values in a constructor when no argument is provided. 

class User {
  constructor(role = "Guest") {
    this.role = role;
  }
}

let u1 = new User();
let u2 = new User("Admin");

  • Constructor Function vs Class Constructor

    Feature

    Constructor Function

    Class Constructor

    Introduced

    Before ES6

    ES6

    Syntax

    Function-based

    Class-based

    Readability

    Less

    More

    Method sharing

    Manual (prototype)

    Automatic

    Usage today

    Rare

    Preferred

    Why Classes Are Preferred Today

    • Cleaner syntax

    • Easier to understand

    • Built-in method sharing

    • Better for large applications

    • Industry standard

    Common Mistakes

    • Forgetting new keyword

    • Writing multiple constructors in a class

    • Confusing constructor function with normal function

    • Misusing this

    • Naming classes incorrectly

    Best Practices for Constructors

    • Use constructors only for initialization

    • Keep constructor logic simple

    • Avoid heavy computations in constructor

    • Use meaningful parameter names

    • Prefer classes over constructor functions

    Real-World Use Cases

    • Creating user objects

    • Product catalog

    • Student management system

    • Employee records

    • Game characters

❮ Previous Next ❯