With the help of examples, you will learn about the JavaScript constructor function in this article. A constructor function is used to build objects in JavaScript. As an example:

// constructor function
function Person () {
    this.name = 'John',
    this.age = 23
}

// create an object
const person = new Person();

• Person() is an object constructor function in the preceding example.
• The new keyword is used to build an object from a  constructor function.

Note: It is recommended that you uppercase the first letter of your constructor function.

Create Multiple Objects with Constructor Function

A constructor function in JavaScript can create several objects. As an example:

// constructor function
function Person () {
    this.name = 'John',
    this.age = 23,

     this.greet = function () {
        console.log('hello');
    }
}

// create objects
const person1 = new Person();
const person2 = new Person();

// access properties
console.log(person1.name);  // John
console.log(person2.name);  // John

Two objects are generated using the same constructor function in the preceding software.

JavaScript Constructor Function Parameters

You can also define a function constructor function that takes parameters. As an example:

// constructor function
function Person (person_name, person_age, person_gender) {

   // assigning  parameter values to the calling object
    this.name = person_name,
    this.age = person_age,
    this.gender = person_gender,

    this.greet = function () {
        return ('Hi' + ' ' + this.name);
    }
}


// creating objects
const person1 = new Person('John', 23, 'male');
const person2 = new Person('Sam', 25, 'female');

// accessing properties
console.log(person1.name); // "John"
console.log(person2.name); // "Sam"

During the object’s creation, we gave arguments to the constructor function in the preceding example.

const person1 = new Person('John', 23, 'male');
const person2 = new Person('Sam', 25, 'male');

This allows each object to have different properties. As shown above,

• console.log(person1.name); gives John
• console.log(person2.name); gives Sam

Create Objects: Constructor Function Vs Object Literal

In most cases, Object Literal is used to generate a single object. If you want to create several objects, use the constructor function. As an example:

// using object literal
let person = {
name: ‘Sam’
}

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

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

Each object produced by the constructor function is distinct. You can have the same 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 = 'Sam'
}

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

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

This age 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 with that object value, any changes to the variable value will affect the original object. As an example:

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

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

let student = person;

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

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

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

Adding Properties And Methods in an Object

You can add properties or methods in an object like this:

// constructor function
function Person () {
    this.name = 'John',
    this.age = 23
}

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

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

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

person1.greet();   // hello

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

Output

hello
Uncaught TypeError: person2.greet is not a function

In the preceding example, the person1 object gains a new field gender and a new method greet().

However, this new property and method are solely available to person1. Person2 cannot access gender or greet(). As a result, when we attempt to access person, the application returns an error. 2.greet();

JavaScript Object Prototype

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

// constructor function
function Person () {
    this.name = 'John',
    this.age = 23
}

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

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

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

You may like:

while and do-while loop in JavaScript