JavaScript Constructor: The Complete Guide

The constructor can use a super keyword to call a parent class constructor. A default constructor is used if you do not specify a constructor method. It is considered good practice to name the constructor functions with an upper-case first letter. For example, the way to create the “object type” is to use an object constructor function.

Javascript constructor

JavaScript constructor is an excellent method for creating and initializing an object produced within the class. There can be only one particular method with the name “constructor” in the class. Having more than one occurrence of the constructor method in the class will throw the SyntaxError error.

Objects of the same type are created by calling a constructor function with a new keyword.

let st2 = new Investor("Eleven", 15);
let st3 = new Investor("Robin", 21);

this Keyword in JavaScript

In JavaScript, this is the object that “owns” the code.

The value of this, when used in the object, is the object itself.

In the constructor function, this does not have a value. Instead, it is the substitute for the new object. This value will become a new object when a new object is created.

One thing you can note here is that this is not a variable. It is a keyword. You cannot change the value of this.

Adding a Property to an Object

Adding the new property to an existing object is easy. See the following code.

function Investor(name, age) {
  this.name = name;
  this.age = age;
}

let st2 = new Investor("Eleven", 15);
let st3 = new Investor("Robin", 21);

st2.nationality = 'British';
console.log(st2);

See the output.

➜  es git:(master) ✗ node app
Investor { name: 'Eleven', age: 15, nationality: 'British' }
➜  es git:(master) ✗

Adding a Method to an Object

Adding the new method to an existing object is easy. See the following code.

function Investor(name, age) {
  this.name = name;
  this.age = age;
}

let st2 = new Investor("Eleven", 15);
let st3 = new Investor("Robin", 21);

st2.nationality = 'British';

st2.eleven = function () {
  return this.name +' is '+ this.age + ' years old';
}
console.log(st2.eleven());

See the following output.

➜  es git:(master) ✗ node app
Eleven is 15 years old
➜  es git:(master) ✗

Adding a Method to a Constructor

You can also define the constructor methods inside the constructor function.

See the following code example.

function Investor(name, age) {
  this.name = name;
  this.age = age;
  this.eleven = function () {
    return this.name +' is '+ this.age + ' years old';
  }
}

let st2 = new Investor("Eleven", 15);
let st3 = new Investor("Robin", 21);

st2.nationality = 'British';
console.log(st2.eleven());

See the following output.

➜  es git:(master) ✗ node app
Eleven is 15 years old
➜  es git:(master) ✗

You cannot add the new method to an object constructor the same way you add the new method to the existing object. Instead, adding new methods to an object constructor must be done inside a constructor function.

Built-in JavaScript Constructors

JavaScript has built-in constructors for native objects like the following.

let a1 = new Object();
let a2 = new String();
let a3 = new Number();
let a4 = new Boolean();
let a5 = new Array();
let a6 = new RegExp();
let a7 = new Function();
let a8 = new Date();

As you can see above, JavaScript has object versions of primitive data types String, Number, Array, and Boolean. But there is no reason to create complex objects. Primitive values are much faster.

Constructor in JavaScript with ES6

In ES6, we can create the classes. This will be familiar to you if you’ve come from the OOP language like Python or PHP. For example, look at the following code.

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

  get detail() {
    return this.name + ' ' + this.age +' '+ this.networth;
  }
}
const eleven = new StrangerThings("Millie", 15, 4);
console.log(eleven);

See the following output.

➜  es git:(master) ✗ node app
StrangerThings { name: 'Millie', age: 15, networth: 4 }
➜  es git:(master) ✗

The class function creates the template we can use later to create the objects. Finally, the constructor() method is the special method called when the instance of a StrangerThings class is created.

  1. A function keyword is replaced with the class keyword.
  2. There’s a particular function named ‘constructor’ where the initialization of an object is done. Hence whatever is present in the body of a traditional function gets shifted to a ‘constructor’ function. It is called whenever a new object of that ‘class’ is created.
  3. Any method created inside the class body is considered a ‘member’ of the class.

super and extends in Javascript

Using the’ extends’ keyword, you can create the subclass or a child class. The subclass can add its logic along with the data inherited from the ‘base’ class.

See the following code example.

class Millie {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(this.name + ' makes a noise.');
  }
}
class Eleven extends Millie {
  constructor(character, power = 'telekenesis') {
    super(character);
    this.power = power;
  }
  speak(){
    console.log('UK Accent');
  }
}
let el = new Eleven('Friends Don\'t lie');
el.speak();

See the following output.

➜  es git:(master) ✗ node app
El has UK Accent
➜  es git:(master) ✗

That’s it for this tutorial.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.