Introduction
If you have used JavaScript, then you are definitely familiar with objects because objects are one of the commonly used data types not only in JavaScript but also in the entire programming community. An object in JavaScript looks like the following.
{
name: “Tom”,
age: 28,
city: “New York”
}
So basically, an object stores data in key-value pairs. We can create an object like we did above, and then assign it to a variable. This is one of creating objects in JavaScript. Another way is by using the constructor function.
Every object created in JavaScript has a default property named prototype. The prototype property is often a consulting concept in JavaScript. In this article, we will discuss what the prototype property is in JavaScript and how to use it.
Prototype
Observe the following code.
function Employee(name, age, city) {
this.name = name;
this.age = age;
this.city = city;
}
“Employee” is a constructor function. Let’s see what is the value of the “Employee. prototype”.
The prototype has several methods and properties. Observe the following image.
So, basically, the “Employee.prototype.constructor” is referring to “Employee” only. If we console “Employee.prototype”, then it will return only an empty object. This happens because as of now, we haven't added anything in the prototype of the “Employee” constructor.
Adding properties
The prototype can be used to add new properties to a defined constructor function.
Let’s create an object first.
function Employee(name, age, city) {
this.name = name;
this.age = age;
this.city = city;
}
const Emp1 = new Employee("Tom", 28, "New York");
The “Emp1” has three properties as of now - name, age, and city.
Now, suppose, we want to add a new property named gender to the “Employee”. We can do this using the prototype.
Employee.prototype.gender = "male";
Now, let’s see if there is any change in “Employee”.
No, because we have added “gender” to the prototype.
Now observe the “Emp1” object we created earlier.
The property added using the prototype is already available in the “Emp1” object.
Let’s create another object.
function Employee(name, age, city) {
this.name = name;
this.age = age;
this.city = city;
}
const Emp1 = new Employee("Tom", 28, "New York");
Employee.prototype.gender = "male";
const Emp2 = new Employee("Lisa", 21, "Chicago”);
The problem here is that the value of “gender” is “Emp2” is also “male”. So to change, we can simply assign a new value to it.
This way of adding new properties to a constructor function using the prototype and then inheriting them in the objects is known as prototype inheritance.
One important point here to remember is that if we change the value of “gender”, then it will be changed for every new object but not for those which are declared before it.
function Employee(name, age, city) {
this.name = name;
this.age = age;
this.city = city;
}
Employee.prototype.gender = "male";
const Emp1 = new Employee("Tom", 28, "New York");
const Emp2 = new Employee("Jack", 25, "Detroit");
Employee.prototype = {
gender: "female",
};
const Emp3 = new Employee("Lisa", 21, "Chicago");
Let’s check the value of “gender” for every object.
The value for “Emp3” is changed but not for “Emp1” and “Emp2” because they were declared before changing the value of “gender”.
Adding methods
Similarly, we can also use the prototype property to add new methods to a constructor function.
Observe the following code.
Employee.prototype.getDetails = function () {
console.log(
`Name of the employee: ${this.name}. \nAge: ${this.age} \nCity: ${this.city} \nGender: ${this.gender}`
);
};
Using the prototype property, the “getDetails” method is added to the “Employee”.
Let’s use the objects to invoke the “getDetails” method.
It will work similarly for the other object created using “Employee”.
Now observe the following code.
Employee.prototype.getDetails = () => {
console.log(
`Name of the employee: ${this.name} \nAge: ${this.age} \nCity: ${this.city} \nGender: ${this.gender}`
);
};
The “getDetails” method is an arrow function. So this means, this method does not “this” keyword, meaning, it will return undefined for name, age, city, and gender.
Wrapping it up
So the object prototype is a simple and powerful yet confusing concept in JavaScript. As objects are an important part of modern JavaScript, it is recommended to understand the concept of prototypes. In this article, we discussed what is prototype and how it is used to add properties and methods to a constructor function.
