DEV Community

Cover image for Learning Constructors in JavaScript
Prashwar Mishra
Prashwar Mishra

Posted on

Learning Constructors in JavaScript

Let's simplify the concept of Constructor by taking an example. Suppose that you are a teacher in a school. You have to tabulate the data of students studying in a class. The data should have student name, roll no and marks. How will you tabulate the data? One of the simplest ways of doing it would be creating an object and storing the data as key-value pair. So for a particular student, we have:


let student1 = {
    name: 'abcd',
    rollNo: 1,
    marks: 80,
};
Enter fullscreen mode Exit fullscreen mode

Okay, now when the data of other students have to be added, they too would be created using the same template. So, for another student, we have:


let student2 = {
    name: 'pqrs',
    rollNo: 2,
    marks: 82,
};
Enter fullscreen mode Exit fullscreen mode

The approach might seem okay for small data-set. But isn't the whole process hectic to maintain for large data? Using { … } syntax to create multiple objects can create certain inconsistencies in code - there can be spelling mistakes, the code can become difficult to maintain, changes to all the objects will be difficult. How can we reduce the amount of work being done here?
We can do so by creating a template. New information can be added by creating "instances" of this template. Those familiar with core programming languages like c, c++, java, etc. and those who know Object Oriented Programming might co-relate this with creating classes and objects, you are right. Also, don't worry if you have no idea of what we are talking about.
So, now that we know we can create a template and drastically reduce the work, the next question that pops up is how do we create a template? Simple, create a function:


function createStudent(name, rollNo, marks){
    let student = new Object();
    student.name = name;
    student.rollNo = rollNo;
    student.marks = marks;
    return student;
}
Enter fullscreen mode Exit fullscreen mode

and use this function to add data:


let student1 = createStudent('abcd', 1, 80);
let student2 = createStudent('pqrs', 2, 82);
Enter fullscreen mode Exit fullscreen mode

So from the above, we can see that creating a function and using it makes our work a lot easier. What if JavaScript can further reduce the amount of work being done? To do so, it uses Constructors.
Constructors technically are regular functions. There is one convention to constructors: The first letter of function is always Capital. We'll learn more about constructors after we look at it's syntax:


class Student{
    constructor(name, rollNo, marks){
        this.name = name;
        this.rollNo = rollNo;
        this.marks = marks;
    }
}
Enter fullscreen mode Exit fullscreen mode

Now to use this constructor function Student, we just need to use the keyword new before each declaration:


let student1 = new Student('abcd', 1, 80);
let student2 = new Student('pqrs', 2, 82);
Enter fullscreen mode Exit fullscreen mode

So, what are the advantages of using Constructors? Using a constructor means that -

  • all of these objects will be created with the same basic structure.
  • we are less likely to accidentally make a mistake compared to the case where we were creating a whole bunch of generic objects by hand.

JavaScript is doing all it's magic of creating a function to a constructor function with the help of new keyword. Whenever we are creating a new instance by using new:

  1. A brand new empty object gets created.
  2. The empty object gets linked to prototype property of that function. (Ignore the point till you know more about prototype in JavaScript)
  3. The empty object gets bound as this keyword for execution context of that function call.

Top comments (0)