Intro to JavaScript constructor functions

Constructor functions in JavaScript help us create new objects with similar properties and behaviors (methods), without the need to set them up one by one. This makes life much easier and less repetitive, especially when we need to work with lots of data that is stored in objects.

The basics

When using a constructor function as a template for your new object, the initial rules to follow are quite simple:

• capitalize the function name’s first letter so it can be distinguished from other functions that are not constructors
• don’t use an arrow function to define your constructor function, but use the function keyword instead

A very simple constructor function will look like this:

function Bird() {
this.name = name;
this.color = color;
}

Don’t be confused by the use of this here. While the topic of this is too much to cover in this post, we’ll get to its use in constructor functions in a bit. Before that, note the last rule basic rule in the context of constructor functions:

• call a constructor function with the keyword new to create a new instance of the object

We have our Bird function above which provides us with a template to create all kinds of Bird objects now. We simply pass it the parameters it expects:

let swan = new Bird('Swan', 'white');

let crow = new Bird('Crow', 'black');

With the code above, we have just created two new Bird objects, one that is swan where this.name has the value of ‘Swan’ and this.color has the value of ‘white’; and one that is crow with ‘Crow’ as the value of this.name and ‘black’ as the value of this.color. To be precise, the swan and crow objects are instances of the Bird constructor.

As mentioned above, one of the most important things to remember about constructor functions is that they define properties and behaviors. Their main use is not to return values as others functions do (even though it is possible to add a return statement to your object) .

The use of this

Ah, our beloved this. It rings every new programmer’s alarm as soon as it appears, right? Inside of constructor functions, this refers to the new object it will create and sets its properties. Referring back to the example code above, this means that this.name refers to the name property that will be created in the new instance of Bird.

Determining instances

We can use the instanceof operator to determine whether or not an object was created with a constructor. It will return true or false. Using the example code from above once more:

let Bird = function (name, color) {
this.name = name;
this.color = color:
}
let swan = new Bird('Swan', 'white');

swan instanceof Bird; // true

let penguin = {
name = 'Pengu',
color = 'white'
}
 penguin instanceof Bird // false