Prototype in JavaScript- What is it and when to use it?

Hey readers, in this article we will be discussing what is a prototype in JavaScript in a step-wise, efficient manner. If you are a beginner and want to learn JavaScript then do check out the course on Codedamn.

Prototype in JavaScript

Because JavaScript is a prototype-based language, whenever we write a function in it, the JavaScript engine adds a prototype property to it. A prototype property is essentially an object (also known as a prototype object) to which we can attach methods and properties, allowing all other objects to inherit these methods and properties.

Consider the following scenario:

There are several methods for creating an object, one of which is to use the function function Object() { [native code] }.

<script>
// function constructor
function Person(name, job, yearOfBirth){
this.name= name;
this.job= job;
this.yearOfBirth= yearOfBirth;
}
// this will show Person's prototype property.
console.log(Person.prototype);
</script>

In the above image, you can see Person has a prototype property and that prototype property has a constructor object which again points to the Person constructor function.

When we use the above function constructor to build an object, JavaScript Engine will add dunder proto or __proto__ to the object, pointing to the prototype’s function object. Now, in a Person function, we’ll add a method calculateAge() to the Prototype property, which will be inherited by all objects.

<script>
// function constructor
function Person(name, job, yearOfBirth){
this.name= name;
this.job= job;
this.yearOfBirth= yearOfBirth;
}
Person.prototype.calculateAge= function(){
console.log('The current age is: '+(2019- this.yearOfBirth));
}
console.log(Person.prototype);
</script>

The calculateAge() function is added to the Prototype property in the image above. Now we’ll make two separate objects that inherit the calculateAge() method. Remember that when a method (or property) is invoked, it initially looks inside the object, but if that doesn’t work, it moves on to the prototype.

<script>
// function constructor
function Person(name, job, yearOfBirth){
this.name= name;
this.job= job;
this.yearOfBirth= yearOfBirth;
}
// adding calculateAge() method to the Prototype property
Person.prototype.calculateAge= function(){
console.log('The current age is: '+(2019- this.yearOfBirth));
}
console.log(Person.prototype);
// creating Object Person1
let Person1= new Person('Jenny', 'CA', 1986);
console.log(Person1)
let Person2= new Person('Blair', 'Developer', 1997);
console.log(Person2)
Person1.calculateAge();
Person2.calculateAge();
</script>

When we called Person1.calculateAge() and Person2.calculateAge(), it first checked whether it was present inside Person1 and Person2 objects, if it wasn’t, it moved Person’s Prototype object and printed the current age, demonstrating how the Prototype property allows other objects to inherit all the properties and methods of the function constructor.

A prototype is an object that is associated with all functions and objects in JavaScript by default, with the prototype property of the function being accessible and editable and the prototype property of the object (aka attribute) being hidden.

By default, every function includes a prototype object.
The prototype object is a specific sort of enumerable object that can have additional characteristics that are shared across all instances of the constructor function.

What are the benefits of using a prototype in JavaScript?

Prototypes make it simple to define methods for all instances of an object. The method is applied to the prototype, thus it is only saved in memory once, but it is accessible to every instance of the object.

Why are prototypes more efficient than alternative ways for constructing JavaScript objects with methods?

A prototype is quick and light on memory. When methods are attached to object instances, each instance gets its own copy of the method. This is dependent on the system’s processing time and memory. When compared to the previous method, this requires less processing time and memory.

Conclusion

This was about a prototype in JavaSript, if you want to learn more about javascript, do check out the article and course on Codedamn of javascript along with the course. Hope you liked this, if you have any queries or suggestions do let us know in the comments. 

If you are interested in learning JavaScript, do check out courses on codedamn with an in-built environment playground to learn and practice code. Join the community of codedamn and do check out other articles related to programming and development on codedamn and subscribe to our newsletter to never miss out on our new programs and updates.

If you have any queries or feedback do let us know in the comment section.