Proto vs Prototype in JavaScript

1. the Use of __proto__ in JavaScript
2. the Use of prototype in JavaScript

In JavaScript, we say that everything is an object. In this article, you will get a deeper understanding of what __proto__ and prototype is in JavaScript and why the statement “everything is an object” holds.

the Use of __proto__ in JavaScript

Whenever you create an array, object, and function in JavaScript, you might know that you can access all the predefined methods available for them.

Have you ever thought of how we get access to all of these methods?

The answer to this question is because the JavaScript automatically attaches the __proto__ to that array, object, or function, which contains all of these properties and methods.

The __proto__ is simply an object. Whether you create an array, object, or function will provide you access to those specific methods.

Let’s take an example and understand __proto__.

Here, we have created an array arr of numbers. If you console the _proto__ on the arr, then you will see that it will list all the properties provided by the array.

For example, it will give access to its constructor and all the array methods like push, pop, map, forEach, and many more.

var arr = [1, 2, 3];
console.log(arr.__proto__)

Output:

And this is not just for arrays. Whatever you create in JavaScript will have a __proto__ object attached to it.

And all these properties present inside the __proto__ can easily be accessed using the dot operator.

the Use of prototype in JavaScript

Now that we understand the __proto__ object, let’s now see what is prototype is in JavaScript.

For this, let’s take an example.

console.log(arr.__proto__);
console.log(Array.prototype);

Output:

Suppose you print the __proto__ of the arr we created and the prototype of the Array class. Then you will realize that they both are the same, as shown in the image above.

This is because whenever we create an array, it takes all the properties and methods from the prototype of the array class and then stores it inside the __proto__ of the array you have created.

In simple words, prototype is a property of a class, whereas __proto__ is a property of the instance of that class. And they both are objects.

Also, if you print the output of the __proto__ of the arr.__proto__, you will see that it is the same as the prototype of the Object class. This is illustrated as follows.

console.log(arr.__proto__.__proto__);
console.log(Object.prototype);

Output:

Here, what exactly happens is that the array arr._proto__ is the array class prototype. And the arr.__proto__.__proto__ is the Object class prototype.

And this forms a chain, so this concept is called prototype chaining in JavaScript.

Finally, you can see that even though we have created an array, it is also storing the reference of the Object.

This now applies to arrays but all the other things we create, like objects and functions in JavaScript. And this is why we say that everything in JavaScript is an object.

The Objects prototype i.e arr.__proto__.__proto__.__proto__ is simply null which means that its the end of the chain.

console.log(arr.__proto__.__proto__.__proto__);

Output:

null