JavaScript - Object Constructors

Object Constructors

Anobject constructorin JavaScript is a function that creates an instance of a class, which is typically called anobject. A constructor is called when you declare an object using the new keyword. The purpose of a constructor is to create an object and set values if there are any object properties present.

There are two ways to create a template for the object in JavaScript - using a class and using an object constructor.

Whenever you need to create multiple objects with the same syntax, you require a template for the object. For example, you are managing the car inventory. So, it is not a good idea to create a new object every time using the object literal. In such cases, you need to use the object constructors.

The main benefit of the object constructors is that you can reuse the code.

Syntax

You can follow the syntax below to use the object constructor to create an object.

function Funcname(p1, p2, ... , pN) {
   this.prop1 = p1;
}
const obj = new Funcname(args);

In the above syntax, Funcname() is a constructor function, and you can replace any valid identifier with the Funcname.

A p1, p2, , and pN are parameters you can use inside the function body. You need to pass arguments to the constructor while creating the object.

The ‘this’ keyword represents the function context you are using. Here, the ‘this’ keyword refers to the current instance of the object.

To create an object, you can use the function constructor with a ‘new’ keyword.

Example: Creating an object using a constructor function

In the example below, we have created a Tree() function. In the function body, we initialize the name and age properties.

After that, we use the function name with a ‘new’ keyword to create an object of the Tree() constructor.

Output

name = palm, age = 5

Example: Constructor function with parameters

In the example below, the Bike() function takes three parameters. In the function body, we initialize the properties using the parameters.

After that, we created bike1 and bike2 objects with different values using the Bike() constructor. In the output, you can observe the object property values.

Output

The bike1 object is : {"name":"Honda","speed":100,"gear":4}

The bike2 object is : {"name":"Yamaha","speed":200,"gear":6}

In this way, you can use the object constructor to reuse the object syntax code and create multiple objects of the same type.

Adding a Property or Method to a Constructor

You learned to add a property of method using the dot or square bracket notation into the object in the Objects chapter. But what if you want to add a property or method to the object constructor?

The object constructor doesn’t allow you to add the property or method after defining it. So, you always need to add the required properties and methods while defining it. Let’s understand it via the example below.

Example

The below example demonstrates adding methods and properties into the object constructor. We added the three properties and the getFullAddress() method in the houseAddress() constructor function.

Also, we have executed the method by taking the object as a reference.

Output

The house object is {"houseNo":20,"street":"Cooper Square","city":"New York"}

The full address of the house is 20, Cooper Square, New York

If you add the method or property as shown below. It will be added to the particular object but not to the constructor function.

Obj.prop = 20;

Other objects created using the object constructor don’t contain the prop property as it is added to the obj object only.

JavaScript Object Prototype

In JavaScript, each object contains the prototype property by default, and the object constructor is also one kind of object. So, you can add properties or methods to the object prototype.

Syntax

You can follow the syntax below to add properties or methods to the object constructor prototype.

obj.prototype.name = value;

In the above syntax, ‘obj’ is an object constructor in which you need to add a property or method.

The ‘name’ is a property or method name.

For the property, you can replace a ‘value’ with an actual value; for the method, you can replace a ‘value’ with a function expression.

Example

In the example below, we have added the BikeDetails() method to the prototype of the Bike() constructor.

The BikDetails() method can be executed using any object of the Bike() constructor. However, when you print the bike1 and bike2 objects, it won’t show you BikeDetails() method as it is added in the prototype.

Output

The bike1 details is: Honda, 100, 4

The bike2 details is: Yamaha, 200, 6

Built-in Object Constructors in JavaScript

JavaScript contains a built-in constructor, which we have listed in the below table.

Sr. No.ConstructorDescriptionExample1ArrayTo create an array.new Array()2StringTo create a string.new String(“Hello”)3NumberTo create a number.new Number(92)4BooleanTo create a boolean.new Boolean(true)5SetTo create a new set.new Set()6MapTo create a new map.new Map()7ObjectTo create a new object.new Object()8FunctionTo create a new function.new Function(“x”, “return x * x;“)9DateTo create an instance of Date object.new Date()10RegExpTo create a new regular expression.new RegExp(“\d+“)11ErrorTo create a new error.new Error(“new error.”)12SymbolTo create a symbol.Symbol(“description”)However, you can also use literal expressions to define the number, strings, boolean, etc., variables containing primitive values.