JavaScript Prototype

Javascript Prototype

Because JavaScript is a prototype-based language, one of the most fundamental things for JavaScript practitioners to grasp is the prototype object. Through several examples, this article will offer you a quick overview to the Prototype object.

What is Prototype-based Language?

JavaScript is a prototype-based object-oriented programming language. This means that anytime we construct a function, JavaScript adds an internal property called Prototype Object to the function. This means that we may attach methods and attributes to objects, allowing them to be inherited by other objects.

Let's take an example

let countryDetails = {
  name: "India",
  code: "+91",
  continent: "Asia"
};

Now we know that we can access the memebers using dot operator. But here comes the interesting part i.e., apart from accessing the properties which are in the above example object we can also access other methods like toString, hasOwnProperty etc.

We shall inherit a few properties from Object in every object we construct or define. Object is a built-in Javascript keyword with a prototype property.

Every object we make will have a property called __proto__ that refers to Object.prototype.

When to use Prototype in JavaScript?

Javascript, as we all know, is a dynamic language that allows us to add new variables and methods to an object at any moment, as illustrated below.

function Employee() {
    this.name = 'Arya';
    this.role = 'SDE';
}

var empObj1 = new Employee();
empObj1.salary = 30000;
console.log(empObj1.salary); // 15

var empObj2 = new Employee();
console.log(empObj2.salary); // undefined

The salary variable, as shown in the example above, adds to the empObj1. However, when we use the empObj2 object to access the salary variable, it does not exist because the salary variable is only declared in the empObj1 object.

Now the question is: Is there a method to add the new variable to the function itself so that it is accessible to all objects produced with the function?

The use of a prototype is the answer to this question. A prototype is a hidden inbuilt object that comes preloaded with all of the functions. The prototype object's variables and methods can be accessed, modified, and even used to generate new variables and functions.

We can attach a new variable or method to the object using proto keyword, as shown below:

Adding Variables Using Prototype

As previously said, there may be occasions when we need to add new variables to an existing object, which is very impossible to do in other programming languages. In javascript, though, we can achieve this by using the prototype. The syntax for adding a new variable is as follows:

Syntax: ClassName.prototype.variableName = value;

Adding Methods Using Prototype

Similarly to variables, we may need to add methods to an existing object on occasion. The prototype functionality in JavaScript can be used to accomplish the same thing. Its syntax is as follows:

Syntax: className.prototype.functionname = ()=>{};

Summary

⮞ The prototype property of the Object() function refers to the Object.prototype object.

⮞ All properties and methods available in all objects, such as function toString() and function valueOf() are available in the Object.prototype object ().

⮞ The prototype object of a given object is returned by the Object.getPrototypeOf() method. Instead of __proto__, use the Object.getPrototypeOf() function.

Conclusion: At this point, you should have a better understanding of JavaScript Prototype. How the prototype function is used in production, and how it can help make code more versatile.