What is [[Prototype]] and prototype property in JavaScript?

Mani Kumar Srivastava

Published in

Geek Culture

3 min readDec 5, 2021

Objective

To understand the difference between [[Prototype]] and prototype properties in JavaScript.

Lets Start…

JavaScript is a high-level, multi-paradigm, single-threaded programming language.

Along with its many features, it has the support for prototype-based object orientation. What this means is that we can provide a blue-print to the objects, so that there are properties or methods that are common across the objects of the same type.

In other programming language, this trait is called as Class Inheritance. But in JavaScript, it is referred as Prototype Inheritance.

In the following text, the word prototype is used in more than one context.
To comprehend the context, follow the below-mentioned guidelines —
* If only prototype is mentioned, then it means the blue-print of an object.
* If prototype property is mentioned, then it means the property of a function which has prototype as the key.

#1) What is [[Prototype]] property?

[[Prototype]] is a property in an object which points to the blue-print or the prototype of the object.

Let’s take an example —

Gist #1.1

In above code, we are trying to set indiaCountryObj as the prototype of haryanaStateObj and gujaratStateObj , using the static setPrototypeOf() method of Object class.

Let’s see the output below —

Video #1.1

We see that the prototype which was set using Object.setPrototypeOf() method is placed inside[[Prototype]] property.

Now, the way a value of a property of an object is accessed is —

First, it will look for the property into the main object.
If it does not find that property in the main object, it will look for that property in that objects prototype.
If it is not there, then it will look into prototype of prototype of main object. And it continues until the value of the property is found, otherwise undefined is returned.

So, if we do something like this —

haryanaStateObj.country // India

then first haryanaStateObj is checked for the country property. And since it is not there, then it goes on to look into the prototype of haryanaStateObj, and there it finds the country property.

To make this point more clear, consider the following example —

Gist #1.2

The output of line #12 in Gist #1.2 is “Germany”, because the property is looked for in haryanaStateObj, and that property is found there itself.

You might be wondering, if [[Prototype]] is a property, then can we access the prototype of that object by executing the following command —

haryanaStateObj.[[Prototype]]

The answer is NO !!

To get the prototype of an object you will have to do something as shown in the following video —

Video #1.2

So, in short, you will have to use the following ways —

Object.getPrototypeOf(haryanaStateObj);
haryanaStateObj.__proto__

#2) What is prototype property ?

Just using the approach mentioned in Section #1 to set the prototype of an object is not the right way, if we want to create 100 object that has the same prototype. An other method is needed which can serve that purpose.

We can use function constructor to make such objects, with the help of prototype property in functions.

Before moving further, do note that prototype property works as expected only in case of functional constructors.

First let’s create some objects with functional constructors without setting its prototype property. Look at the code below.

Gist #2.1

Now, lets see the output —

Video #2.1

By looking at the structure of the objects created through function constructors, we see that the [[Prototype]] property has the constructor property and Object as the prototype of the prototype.

This means that currently the prototype property of the function has the constructor itself.

Now let’s add some properties in the prototype property.

Gist #2.2

This part is interesting.

Video #2.2

All those properties that we had set under getId.prototype are now the part of the [[Prototype]] of the objects created.

Conclusion

In this, we saw ways to set the prototype of an object and understood the difference between [[Prototype]] and prototype properties.

prototype is the property of a function constructor which sets the desired properties in the [[Prototype]] of an object.