Understanding JavaScript Constructor Function

A constructor function is a function that initializes an object, it gives you a more flexible way of creating objects for a function. Constructor function gives you these features:

  1. It is a function that allows you to create or construct an object.
  2. It allows you to define properties for each function at a time it is created.
  3. It groups object together based on shared characteristics and behaviors and define blue print that automate the creation.
  4. With constructor function you can create new objects and define the properties and behaviors that will belong to the new object.

So, how does constructor function works? To answer this, lets make our hands dirty with code.

The syntax of constructor function is

function Car(){
    this.name = "ferrari";
    this.color = "red";
    this.numLegs = 4;
}
console.log(car.name); //Ferrari
console.log(car.color); //red
console.log(car.numLegs); //4

We can see from the example above that:

  • A constructor function is created and the first letter of the function name is uppercase, to distinguish them from other functions
  • The this keyword is used inside the constructor function to set properties of the three (3) objects ( name, color, and numLegs) that we created.

To create a new instance of the constructor function from the previous example and assign it a new variable, the new keyword is used. To create an instance of the function car from the previous example and assign it a value of Toyota. The line is

let toyota = new car();

console.log(toyota.name); //Ferrari
console.log(toyota.color); //red
console.log(toyota.numLegs); //4

we can see that Toyota has all the properties defined inside the car constructor. we can observe from the above line that when calling a constructor, the new keyword is used to tell JavaScript to create a new instance of car called Toyota. Without the new keyword, this inside the constructor would not point to the newly created object. It will give an unexpected error.

To change the properties of Toyota from the previous example;

toyota.name = "Lamborghini";
toyota.color = "white";

console.log(toyota.name); //Lamborghini
console.log(toyota.color); //white

suppose you are writing a program to keep track of thousands of different cars in an a diary, it will take a lot of time to create all the cars, then change the properties to different values. to simplify this you set your constructor to accept parameters.

function car(name, color){
    this.name = name;
    this.color = color
    this.numLegs = 4;
}

let toyota = new car("Lamborghini", "white");

console.log(toyota.name); //Lamborghini
console.log(toyota.color); //white

this will create a new instance of car with the name and color properties set to Lamborghini and white respectively. The numLeg still remain 4.

Summary

  • Constructor function is a function that gives you a more flexible way of creating object for a function.
  • The name convention for a constructor function is pascal notation.

  • The “this” is used in constructor function to set properties of object.

  • The “new” keyword is used to create a new instance of the constructor function and assign it a new variable which will take properties that are define inside the constructor.

  • To write a program that keeps track of thousand of different instances, you can set your constructor to accept variable.