Constructors in JavaScript

In JavaScript, the Constructor is a special method within a class that is automatically invoked when a new instance of that class is created.

The main purpose of the constructor is to initialize the object with default values or with values provided by the user.

In other words, the constructor sets the initial state of an object at the moment of its creation.

Basic constructor syntax

The syntax of a constructor within a class in JavaScript is as follows:

class MyClass {
    constructor(parameter1, parameter2) {
        // object property initialization
        this.property1 = parameter1;
        this.property2 = parameter2;
    }
}

This constructor initializes the object’s properties with the values of the parameters provided when the new instance is created.

Basic example

Imagine we want to create a Car class to represent different cars. We want each car to have properties like brand, model, and year.

class Car {
    constructor(make, model, year) {
        this.make = make;
        this.model = model;
        this.year = year;
    }
}

const myCar = new Car('Toyota', 'Corolla', 2020);
console.log(myCar);

The output of the code will be:

Car { make: 'Toyota', model: 'Corolla', year: 2020 }

Default constructor

If we do not define a constructor within a class, JavaScript will create an empty default constructor.

This default constructor performs no initialization action, meaning no properties are assigned directly upon object creation.

class Person {
    // No explicit constructor here
}

const person1 = new Person();
console.log(person1); // Person {}

Creating instances with classes

Every time a new object is created using the new keyword, JavaScript calls the constructor of the corresponding class to initialize that object.

let person1 = new Person("Juan", 30);
person1.greet(); // Output: "Hello, my name is Juan and I am 30 years old."

The constructor sets the initial properties of the object, and you can use the parameters you pass to the constructor to configure those properties flexibly.

Default value in the constructor

Sometimes, we may not always want the user to pass all parameters when creating an object. In those cases, we can assign default values within the constructor.

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

    greet() {
        console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
    }
}

const person1 = new Person('Juan', 25);
person1.greet(); // "Hello, my name is Juan and I am 25 years old."

class Car {
    constructor(make = 'Unknown', model = 'Unknown', year = 2000) {
        this.make = make;
        this.model = model;
        this.year = year;
    }
}

const car1 = new Car();
console.log(car1); // Car { make: 'Unknown', model: 'Unknown', year: 2000 }

const car2 = new Car('Ford', 'Mustang', 1969);
console.log(car2); // Car { make: 'Ford', model: 'Mustang', year: 1969 }

class Vehicle {
    constructor(make, model) {
        this.make = make;
        this.model = model;
    }
}

class Car extends Vehicle {
    constructor(make, model, year) {
        super(make, model); // We call the parent class's constructor (Vehicle)
        this.year = year;
    }
}

const car1 = new Car('Honda', 'Civic', 2022);
console.log(car1); // Car { make: 'Honda', model: 'Civic', year: 2022 }