In this tutorial, you will learn about the JavaScript constructor function with the assistance of examples.
In JavaScript, functions can be used as templates for making different objects. These functions are called constructor functions and have special properties that are not quite the same as regular functions.
In JavaScript, a constructor function is used to make objects. For instance,
// constructor function function Person () { this.name = 'Salman', this.age = 23 } // create an object const person = new Person();
In the above example, function Person() is an object constructor function.
To make an object from a constructor function, we use the new watchword.
Note: It is viewed as a decent practice to underwrite the first letter of your constructor function.
In this article, you will learn-
Create Multiple Objects with Constructor Function
In JavaScript, you can create multiple objects from a constructor function. For example,
// constructor function function Person () { this.name = 'Salman', 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); // Salman console.log(person2.name); // Salman
In the above program, two objects are created using the same constructor function.
JavaScript this Keyword
In JavaScript, when this watchword is used in a constructor function, this alludes to the object when the object is made. For instance,
// constructor function function Person () { this.name = 'Salman', } // create object const person1 = new Person(); // access properties console.log(person1.name); // Salman
Hence, when an object accesses the properties, it can directly access the property as person1.name.
JavaScript Constructor Function Parameters
You can also create a constructor function with parameters. For 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('Salman', 23, 'male'); const person2 = new Person('Sara', 25, 'female'); // accessing properties console.log(person1.name); // "Salman" console.log(person2.name); // "Sara"
In the above model, we have passed contentions to the constructor function during the formation of the object.
const person1 = new Person('salman', 23, 'male'); const person2 = new Person('sohail', 25, 'male');
This allows each object to have different properties. As shown above,
console.log(person1.name); gives Salman
console.log(person2.name); gives Sohail
Make Objects: Constructor Function Vs Object Literal
Object Literal is for the most part used to make a single object. The constructor function is valuable on the off chance that you need to make different objects. For instance,
// using object literal let person = { name: 'Sohail' }
// using constructor function function Person () { this.name = 'Sohail' } let person1 = new Person(); let person2 = new Person();
Each object made from the constructor function is unique. You can have similar properties as the constructor function or add another property to one specific object. For instance,
// using constructor function function Person () { this.name = 'Sohail' } let person1 = new Person(); let person2 = new Person(); // adding new property to person1 person1.age = 20;
Presently this age property is unique to person1 object and isn’t accessible to person2 object.
However, if an object is made with an object literal, and if a variable is characterized with that object value, any adjustments in the variable value will change the original object. For instance,
// using object lateral let person = { name: 'Sohail' } console.log(person.name); // Sohail let student = person; // changes the property of an object student.name = 'Salman'; // changes the origins object property console.log(person.name); // Salman
At the point when an item is made with an object literal, any object variable derived from that object will go about as a clone of the original object. Subsequently, any change you make in one object will likewise reflect in the other object.
Adding Properties And Methods in an Object
You can add properties or methods in an object like this:
// constructor function function Person () { this.name = 'Salman', 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 above example, a new property gender and a new method greet() is added to the person1 object.
However, this new property and method is only added to person1. You cannot access gender or greet() from person2. Hence the program gives error when we try to access person2.greet();
JavaScript Object Prototype
You can likewise add properties and strategies to a constructor function using a prototype. For instance,
// constructor function function Person () { this.name = 'Salman', 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
JavaScript Built-in Constructors
JavaScript also has built-in constructors. Some of them are:
let a = new Object(); // A new Object object let b = new String(); // A new String object let c = new Number(); // A new Number object let d = new Boolean(); // A new Boolean object
In JavaScript, strings can be created as objects by:
const name = new String ('Salman'); console.log(name); // "Salman"
In JavaScript, numbers can be created as objects by:
const number = new Number (57); console.log(number); // 57
In JavaScript, booleans can be created as objects by:
const count = new Boolean(true); console.log(count); // true
Note: It is prescribed to use primitive data types and make them in an ordinary manner, for example, const name = ‘Salman’;, const number = 57, and const count = true;
You ought not to pronounce strings, numbers, and boolean qualities as objects since they slow down the program.
Note: In JavaScript, the watchword class was presented in ES6 (ES2015) that likewise allows us to make objects. Classes are like constructor functions in JavaScript.
Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your photos and creative projects with us.