An Easy Guide To Understanding Constructors In JavaScript
Tags: javascript, tutorial, webdev, beginners
Published: 2020-05-09 22:14:10

---
title: An Easy Guide To Understanding Constructors In JavaScript
published: true
description: Learn the inside-out of JavaScript constructors and their role in prototypal inheritance.
tags: Javascript, tutorial, webdev, beginners
series: OOP (Object Oriented Programming) In JavaScript
cover_image:  https://res.cloudinary.com/drquzbncy/image/upload/v1588413118/DEV.TO/js_obj_zkjnbv.jpg
---

## Table of Contents
  1. [An Introduction To Constructors](#chp-1)
  2. [Functions, Constructors And The *new* Operator](#chp-2)
  3. [Constructors And Prototypal Inheritance](#chp-3)
  4. [JavaScript's Built-In Constructors](#chp-4)
  5. [Closing Thoughts](#chp-5)

#### 1. An Introduction To Constructors <a name="chp-1"></a>
In the previous article in this series, we looked at prototypal inheritance in JavaScript and talked about important object-oriented (OOP) JavaScript concepts like the prototype, the prototype chain, inheritance, and more. We also looked at how to set an object's prototype using its *\_\_proto\_\_* property (*we noted that this is not the recommended way.*) and dealt with the ***this*** variable in detail. 
You can read through this article below:
{% post https://dev.to/lawrence_eagles/understanding-prototypal-inheritance-in-javascript-4f31 %}

In this article, we would pick up where we left off by looking at the recommended ways to set an object's prototype in JavaScript. 
While there are several ways to do this, our focus here is on function constructors. 

> :sparkles: *We will deal with the other recommended methods in the upcoming articles in this series. Talking in detail about all of them; in a single article would make it very long and grueling to read!*

##### Constructors
Constructors in JavaScript are special functions that are used to construct objects. This topic may appear difficult and intimidating but it is actually very simple. 

> :bulb: *The key to understanding constructors is to know that they are actually normal JavaScript functions. What makes them special is that they are always invoked along with a very powerful operator in JavaScript called the new operator.*

*Kindly run the code below and consider its result.*
{% runkit %}
function Person () {
     this.firstname = "Lawrence"
     this.lastname = "Eagles"
     this.occupation = "Software Developer"
     this.gender = "male"
}

const Lawrence = new Person(); 
console.log(Lawrence);
{% endrunkit %}

Our small contrieved example above creates a new object and stores a reference to it in the *Lawrence* variable. This object has all the properties specified in the Person constructor. 
The *Person* function itself is a normal JavaScript function; what gives it the power of a constructor (*the power to construct objects*) is this line of code:
```js
const Lawrence = new Person();  
```

> :sparkles: The *new* operator modifies the behaviour of the function it operates on. Using this along with some JavaScript design patterns, we are able to create powerful constructors. We will elaborate on this in the next section.

#### 2. Functions, Constructors And The *new* Operator <a name="chp-2"></a>

In section 1 we learned that when the Person constructor, (or any other constructor) is invoked without the *new* operator it is invoked as a regular JavaScript function. In this section, we will elaborate on this with code examples.
*Kindly consider the code below.*
```js
function Person () {
     this.firstname = "Lawrence"
     this.lastname = "Eagles"
     this.occupation = "Software Developer"
     this.gender = "male"
}
```
Above is the declaration of the *Person* function. We can notice two things from it viz:
* It sets some properties e.g firstname, lastname, occupation, and gender to the object the ***this*** variable binds (or is pointing) to. In this case the global object.

> :bulb: *As mentioned in the previous article in this series, one rule of the* ***this*** *variable is that when it is used inside a function it points to the global object but when it is used inside a method (a function in an object) it would point to that object*

If this is not very clear to you, feel free to visit my previous article on OOP JavaScript. I have already provided a link to it in section 1. 
However, here is a quick recap.
*Kindly run the code below and consider its result*
{% runkit %}
const devName = "Lawrence Eagles"
function tellDevName () {
    console.log("result", this.devName)
}
tellDevName();
// returns "Lawrence Eagles"
{% endrunkit %}

The above example shows that the ***this*** variable inside a function is pointing to the global object. 
* Another thing that should be pretty obvious about the *Person* function is that it does not have a return statement hence when invoked it would return undefined. 

> :bulb: *The JavaScript engine would return undefined from any function that does not return a value. This behaviour is leveraged in creating constructors as we are able to modify what that function returns using the new operator. Hence it is a common pattern in JavaScript, that constructors do not have a return statement*

##### The New Operator
This is a very powerful JavaScript operator that has the ability to modify certain behaviours of a function. 
The *new* operator can be very confusing and somewhat intimidating at first. 
> :sparkles: *The key to understanding it is to always see it as another regular JavaScript operator. Hence, a good understanding of operators in JavaScript is necessary to grasp the power of this operator*.

##### Operators
Operators are special JavaScript functions that are syntactically different from regular functions. They are not like a regular JavaScript functions objects hence passing them to *console.dir()* would *throw* an error. You can see some code examples below.
*Kindly run the codes below and consider the results:*
{% runkit %}
function tellDevName () {
    console.log("result", this.devName)
}
console.dir("function properties", tellDevName)
console.dir("function properties", Date)
// if you uncomment the lines below and run the codes in you get an error.
// console.dir("function properties", +)
// console.dir("function properties", new)
{% endrunkit %}

> :bulb: *The console.dir() displays an interactive list of the properties of the specified JavaScript object*

![codes result from runkit](https://res.cloudinary.com/drquzbncy/image/upload/v1589055569/DEV.TO/Screenshot_2020-05-09_at_21.19.15_h8pirh.png)

You can see all the properties of the *tellDevName* function and the *Date* constructor when you run the code but if you uncomment the lines where I passed an operator as a parameter, and try to run the code, runkit would *throw* an error, this tells us that they are not regular function objects.

Operators much like regular functions take parameters (which are called operands) but unlike regular functions, they give us a convenient syntax which can be in the form of any of the three notations below:
* Infix Notation: In this notation, operators are placed between their operands. 
*Kindly consider the code below:*

```js
2 + 2 // returns 4
3 * 3 // returns 9
4 - 4 // returns 0
5 / 5 // returns 1
6 % 2 // returns 0
```
In our examples above each operator sits between two parameters (operands) and returns a value. [Learn more about the infix notation here](https://en.wikipedia.org/wiki/Infix_notation)
* Postfix Notation: In this Notation, the operators follow their operands.
*Kindly consider the codes below:*

```js
const mixNumbers = [1,2,3,4,5,6,7,8,9,10,11,12]
const evenNumbers = []
for (let i=0; i < mixNumbers.length; i++) {
    if (mixNumbers[i] % 2 === 0){
       evenNumbers.push(mixNumbers[i])
    }
}
console.log("even numbers", evenNumbers)
```
Above is a small example that finds the even number from a list of numbers. But what concerns us from this example is the increment operator. 
There is also the decrement operator. [Learn more about the postfix notation](https://en.wikipedia.org/wiki/Reverse_Polish_notation)
*Kindly consider the code below:*

```js
i++ increment operator
i-- decrement operator
```
* Prefix Notation: In this notation, the operator precedes its operands. [Learn more about the prefix notation](https://en.wikipedia.org/wiki/Polish_notation)
*Kindly consider the codes below:*
```js
!true               // logical NOT (!) returns false
!false              // logical NOT (!) returns true
++i                 // prefix increment             
--i                 // prefix decrement
new constructor()   // returns the newly constructed object
```
From our examples above we can see that the new operator uses the prefix notation it takes a function (constructor) invocation and returns a newly constructed object.

> :tada: *I do hope that our succinct discourse on operators, would make you understand the new operator better and hence further your understanding of function constructors* 

With our understanding of operators, we can now clearly see that the *new* operator actually takes a function (constructor) invocation as its parameter(operand) it then performs some operations on it and returns a value. 
Below are the operations of the *new* operator on a function constructor.

* Creates an empty object and binds (points) the ***this*** variable to the newly created object.
* Returns the object the ***this*** variable binds to (the newly created object) if the function doesn't return its own object *(this is why constructors should not have a return statement)*.
*Kindly run the codes below and consider the results:*

{% runkit %}
// regular function
function person () {}
const regularDeveloper = person()
console.log("regular function result", regularDeveloper)

// constructor 
function Person () {
    console.log("this binds to", this)
}
const constructorDeveloper = new Person()
console.log("Person constructor result", constructorDeveloper)

function BadPerson () {
    console.log("this binds to", this)
    return {name: "Jack", age: "70"}
}
const BadJack = new BadPerson()
console.log("BadPerson constructor result", BadJack)
{% endrunkit %}

From the code example above I have deliberately given 2 of the 3 functions the same name but since JavaScript is case sensitive they are two different functions. Notice that the first letter of the constructor's name is capitalized while the regular function name is all lowercase. 

> :bulb: *We use this pattern in JavaScript to differentiate constructors from regular functions. The first letter of a constructor's name is always capitalized. This would also serve as a reminder for you to use the new operator with every constructor. In our code example above, Person is the constructor and person is the regular function.*

We can see from the result of the code above that the regular function returns *undefined* as expected but the constructor returns a new object created by the *new* operator which also binds the ***this*** variable in that constructor to this object. 

> :boom: *Also notice the BadPerson constructor that returns its own object fails to return the object created from the new operator. This is a pitiful we must avoid. Again, as a rule, a constructor should not have a return statement:exclamation:*

![Alt JavaScript constructor's result](https://res.cloudinary.com/drquzbncy/image/upload/v1589045590/DEV.TO/Screenshot_2020-05-09_at_18.32.34_oqkosj.png)

##### JavaScript Design Patterns For Creating Constructors
With our knowledge of constructors and the *new* operator, we can easily add properties to the newly constructed object . Here is a common JavaScript pattern for this.
*Kindly consider the code below*
```js
function Person () {
     this.firstname = "Lawrence"
     this.lastname = "Eagles"
     this.occupation = "Software Developer"
     this.gender = "male"
}
```
The only limitation here is that any object created by this constructor is always going to have these properties. In other to make the object properties dynamic, we can pass them as parameters to the constructor (since constructors are regular functions in the first place).
*Kindly run the codes below and consider its result:*

{% runkit %}
function Person (firstname, lastname, occupation, gender) {
     this.firstname = firstname
     this.lastname = lastname
     this.occupation = occupation
     this.gender = gender
}
const Developer = new Person("Lawrence", "Eagles", "Software Developer", "Male")
const Doctor = new Person("Ben", "Carson", "Neurosurgeon", "Male")
const Scientist = new Person("Albert", "Einstein", "Scientist", "Male")

console.log("developer", Developer)
console.log("doctor", Doctor)
console.log("scientist", Scientist)
{% endrunkit %}

From the results of running the code above, we can see that the arguments passed to each constructor, when invoked with the *new* operator are used to set up the properties of the newly constructed objects.
[You can read more about the *new* operator at MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new).

* Lastly the *new* operator links (sets) the prototype of the newly created object to another object. 
In our introduction, we said we were going to talk about the recommended ways to set an object's prototype and our focus was on function constructors. This point brings our long discourse back to the subject matter. Let's talk more about it in the next section.

#### 3. Constructors And Prototypal Inheritance <a name="chp-3"></a>
In JavaScript, every function has a property called the ***prototype***. This sits as an empty object in the function and remains dormant throughout the life of that function. It would only become active and quite useful if that function is used as a constructor.

> :bulb: *The prototype property of a function (which is an object in JavaScript) is not the prototype of that function object but it acts as the prototype of any object constructed with that function when it is used as a constructor. The naming is a little confusing but we love our JavaScript :wink:*

*Kindly run the code below and consider its result:*
{% runkit %}
function Person (firstname, lastname, occupation, gender) {
     this.firstname = firstname
     this.lastname = lastname
     this.occupation = occupation
     this.gender = gender
}

// lets add some properties to the prototype property of the Person constructor.
Person.prototype.getPersonBio = function () {
          console.log("Hello my name is " + this.lastname + " " + this.firstname + " I am a " + this.occupation )
    }
const Developer = new Person("Lawrence", "Eagles", "Software Developer", "Male")
const Doctor = new Person("Ben", "Carson", "Neurosurgeon", "Male")
const Scientist = new Person("Albert", "Einstein", "Scientist", "Male")

console.log("Developer's bio:", Developer.getPersonBio())
console.log("Doctor's bio:", Doctor.getPersonBio())
console.log("Scientist's bio", Scientist.getPersonBio())
{% endrunkit %} 

From the results of the code above we can see that all the objects constructed with the Person constructor have access to the *getPersonbio* method which sits in the prototype property of the Person constructor. As we have noted above this property becomes the prototype of each object. 

> :sparkles: *The details of how the search is made down the prototype chain in other for all the constructed object to access the getPersonBio method has already been discussed in the previous article. I would kindly suggest you take a look at it if this section is not very clear to you.*

#### 4. JavaScript's Built-In Constructors <a name="chp-4"></a>

JavaScript comes with some built-in constructors. If you are a JavaScript developer, there is a high probability that you have used some of them.
*Kindly run the code below and consider its result:*

{% runkit %}
const NumObject = new Number("20")
const StringObject = new String("Hello World")
const Today = new Date()

console.log(NumObject)
console.log(StringObject)
console.log(Today)
{% endrunkit %}

From running the codes above we can see that each returns an object because every constructor in JavaScript returns an object. 
You can learn more about each of these built-in constructors from the links below:
[Number Constructor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/Number)
[String Constructor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/String)
[Date Constructor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date)

> :sparkles: *These are just a selected few you can get a more robots list [here](http://es5.github.io/#x15.1.4)*

#### 5. Closing Thoughts <a name="chp-5"></a>
I do hope you followed through to this point. If you did you are really appreciated. It has been a long discussion, and I hope you got a thing or two. If so, I would now be looking forward to hearing your opinions, comments, questions, or requests (in case anything is not clear) in the comments section below.