In JavaScript, a constructor function is used to create and initialize objects.
Here is a simple example of a constructor function. Read the rest of the tutorial for more.
Example
// constructor function function Person () { this.name = "John", this.age = 23 } // create an object const person = new Person(); // print object attributes console.log(person.name); console.log(person.age); // Output: // John // 23 Here, Person() is an object constructor function. And, we use the new keyword to create an object from a constructor function.
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 = "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 In the above program, we created two objects (person1 and person2) using the same constructor function.
In JavaScript, when this keyword is used in a constructor function, this refers to the specific object in which it is created. For example,
// constructor function function Person () { this.name = "John" } // create object const person1 = new Person(); // access properties console.log(person1.name); // John Hence, when an object accesses the name property of the constructor function, it can directly access it as person1.name.
JavaScript Constructor Function Parameters
You can also create a constructor function with parameters. For example,
// constructor function with parameters function Person (person_name, person_age, person_gender) { // assign 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}`); } } // create objects and pass arguments const person1 = new Person("John", 23, "male"); const person2 = new Person("Sam", 25, "female"); // access properties console.log(person1.name); // John console.log(person2.name); // Sam In the above example, we have passed arguments to the constructor function during the creation of the object.
const person1 = new Person("John", 23, "male"); const person2 = new Person("Sam", 25, "female"); This allows each object to have different properties:
| person1 | person2 |
|---|---|
name holds the value John. | name holds the value Sam. |
| age holds the value 23. | age holds the value 25. |
gender holds the value male. | gender holds the value female. |
Constructor Function vs. Object Literal
Object literals are used to create a single object.
On the other hand, constructor functions are useful if you want to create multiple objects. For example,
// use object literal to create // a single object person let person = { name: "Sam" } // use constructor function function Person () { this.name = "Sam" } // create multiple objects // from constructor function let person1 = new Person(); let person2 = new Person(); Objects created from constructor functions are unique. Thus, you can add a new property to a particular object that isn't accessible to other objects. For example,
// use constructor function function Person () { this.name = "Sam" } let person1 = new Person(); let person2 = new Person(); // add new property to person1 person1.age = 20; // add a method to person1 object person1.greet = function () { return "hello"; } console.log(person1.age); // 20 console.log(person1.greet()); // hello console.log(person2.age); // undefined console.log(person2.greet()); // ERROR! Here, the age property and the greet() method are unique to person1 and are thus unavailable to person2.
On the other hand, when an object is created with an object literal, any object variable derived from that object will act as a clone of the original object.
Hence, changes you make in one object will be reflected in the other. For example,
// use object lateral let person = { name: "Sam" } console.log(person.name); // Sam // assign person object to student variable let student = person; // change the property of student object student.name = "John"; // add method to student object student.greet = function () { return "hello"; } // original object property is also changed console.log(person.name); // John // original object now has the greet() method console.log(person.greet()); // hello JavaScript Built-In Constructors
JavaScript also has built-in constructors to create objects of various types. Some of them are:
| Constructor | Description |
|---|---|
Object() | Creates a new object with properties and methods. |
String() | Constructs a string object for manipulating and representing textual data. |
Number() | Constructs a number object for handling data and operations. |
Boolean() | Constructs a boolean object representing true or false values for logical operations. |
Example: JavaScript Built-In Constructors
// use Object() constructor to create object const person = new Object({ name: "John", age: 30 }); // use String() constructor to create string object const name = new String ("John"); // use Number() constructor to create number object const number = new Number (57); // use Boolean() constructor to create boolean object const count = new Boolean(true); console.log(person); console.log(name); console.log(number); console.log(count); Output
{ name: 'John', age: 30 } [String: 'John'] [Number: 57] [Boolean: true] Note: You should not declare strings, numbers, and boolean values as objects because they slow down the program. Instead, declare them as primitive types using code such as let name = "John", let number = 57, etc.
More on Constructor Functions
You can also add properties and methods to a constructor function using a prototype. For example,
// constructor function function Person () { this.name = "John", this.age = 23 } // create objects let person1 = new Person(); let person2 = new Person(); // add a new property to the constructor function Person.prototype.gender = "Male"; console.log(person1.gender); // Male console.log(person2.gender); // Male To learn more about prototypes, visit JavaScript Prototype.
In JavaScript, the class keyword was introduced in ES6 (ES2015) to provide a more convenient syntax for defining objects and their behavior.
Classes serve as blueprints for creating objects with similar properties and methods. They resemble the functionality of constructor functions in JavaScript.
To learn more, visit JavaScript Classes.
Also Read: