JS OOPs: JavaScript Constructor Method

In this article, you'll get to understand the JavaScript constructor method.

A constructor is a function that makes an instance of a class, often known as an "object." A constructor is called whenever you declare an object in JavaScript using the new keyword.

A constructor's aim is to build an object as well as set values for any object properties that are present. It's a great technique to build an object since you don't have to explicitly declare what to return because the constructor function returns the object that is generated within it by default.

What Happens When a Constructor Gets Called?

When a constructor is called in JavaScript, the following processes are performed:

  • A new empty object is made.
  • The "this" keyword starts referring to the new object, which becomes the current instance object.
  • The new object gets returned as the constructor's return value.

The Object Constructor Function

To build objects with a constructor function, just specify a JavaScript function with any number of parameters (arguments). The "this "keyword is used as a placeholder for the object getting created within the function. This has no value if the constructor function is applied without the new statement.

A constructor function should be capitalized.

function Laptop(brand, size, year) {
  this.brand = brand;
  this.size = size;
  this.year = year;
}

var laptop1 = new Laptop('Macbook', '13inch', 2017);
var laptop2 = new Laptop('Macbook', '13inch', 2019);

console.log('Laptop 1 is a ' + laptop1.year + ' ' + laptop1.brand + ' ' + laptop1.size);
// Output: Laptop 1 is a 2017 Macbook 13inch

console.log('Laptop 2 is a ' + laptop2.year + ' ' + laptop2.brand + ' ' + laptop2.size);
// Output: Laptop 2 is a 2019 Macbook 13inch

The Class Constructor Method

A special constructor method is defined while defining a Javascript class. The constructor method, similar to the object constructor function, can take any number of parameters (arguments), and the "this" keyword can serve as a placeholder for the object being built.

class Laptop {
  constructor(brand, size, year) {
    this.brand = brand;
    this.size = size;
    this.year = year;
  }
}

var laptop1 = new Laptop('Macbook', '13inch', 2017);
var laptop2 = new Laptop('Macbook', '13inch', 2019);

console.log('Laptop 1 is a ' + laptop1.year + ' ' + laptop1.brand + ' ' + laptop1.size);
// Output: Laptop 1 is a 2017 Macbook 13inch

console.log('Laptop 2 is a ' + laptop2.year + ' ' + laptop2.brand + ' ' + laptop2.size);
// Output: Laptop 2 is a 2019 Macbook 13inch

Constructor Function Vs. Object Literal

Object Literal is used to generate a single object. If you wish to create several objects, use the constructor function. As an example,

// using object literal
let person = {
    name: 'Korg'
}
// using constructor function
function Person () {
    this.name = 'Korg'
}

let person1 = new Person();
let person2 = new Person();

Each object produced by the constructor function is different. You can use the exact properties as the constructor function, or you can add a new property to a specific object. As an example,

// using constructor function
function Person () {
    this.name = 'Korg'
}

let person1 = new Person();
let person2 = new Person();

// adding new property to person1
person1.age = 18;

This age attribute (property) is now exclusive to the person1 object and is not available to the person2 object.

If an object is created using an object literal and a variable is defined using that object value, whatever changes are made to the variable value will affect the original object. As an example,

// using an object lateral
let person = {
    name: 'Korg'
}

console.log(person.name); // Korg

let student = person;

// changes the property of an object
student.name = 'Korg';

// changes the origins object property
console.log(person.name); // Korg

Any object variable derived from an object generated using an object literal will operate as a duplicate of the original object. As a result, whatever alteration you make to one item will also affect the other.

Addition of Methods And Properties in an Object

In an object, you can include the following methods or properties as shown below:

// constructor function
function Person () {
    this.name = 'Anita',
    this.age = 18
}

// creating objects
let person1 = new Person();
let person2 = new Person();

// adding property to person1 object
person1.gender = 'female';

// adding method to person1 object
person1.greet = function () {
    console.log('hi');
}

person1.greet();   // hi

// Error code
// person2 doesn't have greet() method
person2.greet();

JavaScript Object Prototype

A prototype may also be used to add methods and properties to a constructor function. As an example,

// constructor function
function Person () {
    this.name = 'Anita',
    this.age = 18
}

// creating objects
let person1 = new Person();
let person2 = new Person();

// adding new property to constructor function
Person.prototype.gender = 'Female';

console.log(person1.gender); // Female
console.log(person2.gender); // Female

Learn more about Javascript Prototypes HERE