29/07/2022, 08:09 A Complete Guide to JavaScript Contructor Functions
JavaScript Constructor Function
If this JavaScript tutorial saves you
hours of work, please whitelist it in
your ad blocker 😭 and
Donate Now
([Link]
to support us ❤️in paying for web
hosting and CDN to keep the site
running.
Summary: in this tutorial, you’ll learn about the JavaScript constructor function and how to use the
new keyword to create an object.
Introduction to JavaScript constructor functions
In the JavaScript objects tutorial ([Link] , you learned how to use
the object literal syntax to create a new object.
For example, the following creates a new person object with two properties firstName and
lastName :
let person = {
firstName: 'John',
lastName: 'Doe'
};
In practice, you often need to create many similar objects like the person object.
[Link] 1/7
29/07/2022, 08:09 A Complete Guide to JavaScript Contructor Functions
To do that, you can use a constructor function to define a custom type and the new operator to
create multiple objects from this type.
Technically speaking, a constructor function is a regular function ([Link]
function/) with the following convention:
The name of a constructor function starts with a capital letter like Person , Document , etc.
A constructor function should be called only with the new operator.
Note that ES6 introduces the class ([Link]
keyword that allows you to define a custom type. And classes are just syntactic sugar over the
constructor functions with some enhancements.
The following example defines a constructor function called Person :
function Person(firstName, lastName) {
[Link] = firstName;
[Link] = lastName;
In this example, the Person is the same as a regular function except that its name starts with the
capital letter P .
To create a new instance of the Person , you use the new operator:
let person = new Person('John','Doe');
Basically, the new operator does the following:
Create a new empty object and assign it to the this variable.
Assign the arguments 'John' and 'Doe' to the firstName and lastName properties of
the object.
Return the this value.
[Link] 2/7
29/07/2022, 08:09 A Complete Guide to JavaScript Contructor Functions
It’s functionally equivalent to the following:
function Person(firstName, lastName) {
// this = {};
// add properties to this
[Link] = firstName;
[Link] = lastName;
// return this;
Therefore, the following statement:
let person = new Person('John','Doe');
… returns the same result as the following statement:
let person = {
firstName: 'John',
lastName: 'Doe'
};
However, the constructor function Person allows you to create multiple similar objects. For example:
let person1 = new Person('Jane','Doe')
let person2 = new Person('James','Smith')
Adding methods to JavaScript constructor functions
An object may have methods that manipulate its data. To add a method to an object created via the
constructor function, you can use the this keyword. For example:
[Link] 3/7
29/07/2022, 08:09 A Complete Guide to JavaScript Contructor Functions
function Person(firstName, lastName) {
[Link] = firstName;
[Link] = lastName;
[Link] = function () {
return [Link] + " " + [Link];
};
Now, you can create a new Person object and invoke the getFullName() method:
let person = new Person("John", "Doe");
[Link]([Link]());
Output:
John Doe
The problem with the constructor function is that when you create multiple instances of the Person ,
the [Link]() is duplicated in every instance, which is not memory efficient.
To resolve this, you can use the prototype ([Link] so that all
instances of a custom type can share the same methods.
Returning from constructor functions
Typically, a constructor function implicitly returns this that set to the newly created object. But if it
has a return statement, then here’s are the rules:
If return is called with an object, the constructor function returns that object instead of this .
If return is called with a value other than an object, it is ignored.
Calling a constructor function without the new keyword
[Link] 4/7
29/07/2022, 08:09 A Complete Guide to JavaScript Contructor Functions
Technically, you can call a constructor function like a regular function without using the new keyword
like this:
let person = Person('John','Doe');
In this case, the Person just executes like a regular function. Therefore, the this inside the
Person function doesn’t bind to the person variable but the global object
([Link] .
If you attempt to access the firstName or lastName property, you’ll get an error:
[Link]([Link]);
Error:
TypeError: Cannot read property 'firstName' of undefined
Similarly, you cannot access the getFullName() method since it’s bound to the global object.
[Link]();
Error:
TypeError: Cannot read property 'getFullName' of undefined
To prevent a constructor function to be invoked without the new keyword, ES6 introduced the
[Link] ([Link] property.
If a constructor function is called with the new keyword, the [Link] returns a reference of the
function. Otherwise, it returns undefined .
The following adds a statement inside the Person function to show the [Link] to the
console:
[Link] 5/7
29/07/2022, 08:09 A Complete Guide to JavaScript Contructor Functions
function Person(firstName, lastName) {
[Link]([Link]);
[Link] = firstName;
[Link] = lastName;
[Link] = function () {
return [Link] + " " + [Link];
};
The following returns undefined because the Person constructor function is called like a regular
function:
let person = Person("John", "Doe");
Output:
undefined
However, the following returns a reference to the Person function because it’s called with the new
keyword:
let person = new Person("John", "Doe");
Output:
[Function: Person]
By using the [Link] , you can force the callers of the constructor function to use the new
keyword. Otherwise, you can throw an error like this:
[Link] 6/7
29/07/2022, 08:09 A Complete Guide to JavaScript Contructor Functions
function Person(firstName, lastName) {
if (![Link]) {
throw Error("Cannot be called without the new keyword");
}
[Link] = firstName;
[Link] = lastName;
Alternatively, you can make the syntax more flexible by creating a new Person object if the users of
the constructor function don’t use the new keyword:
function Person(firstName, lastName) {
if (![Link]) {
return new Person(firstName, lastName);
[Link] = firstName;
[Link] = lastName;
let person = Person("John", "Doe");
[Link]([Link]);
This pattern is often used in JavaScript libraries and frameworks to make the syntax more flexible.
Summary
JavaScript constructor function is a regular function used to create multiple similar objects.
[Link] 7/7