__proto__ and prototype in JavaScript

Photo by Mohammad Rahmani on Unsplash

Hello World 🌏

Prototype is one of the most important concept in JavaScript and mostly in every interview this question is asked by the interviewer.

To understand prototypes, we have to understand few key concepts.
lets consider following code snippet:

what do you think what will be printed in the console? Yes you are right Krishna will be printed in the console.

Now consider this code snippet:

In the above code I am trying to console a key which is not present in the object. Can you guess what will be printed in the console?

.

.

Yes you guessed it right 😃, it will print undefined in the console. This is default behaviour of the javascript that if a key is not exist in an object it’s value will be undefined automatically.

What if I tell that it is still possible to have a value corresponding to weapon key? How ? Lets explore 🗺️ together …..

JavaScript is very friendly, it gives a way, by using it we can instruct JS engine to look up for a key into another object if the key is not present in the current object.

Consider following code snippet:

Hmmmm…. Things started getting interesting. Can you guess what will be logged in the console?

.

.

.
Yes, may be you guessed it right. In the console Chakra will be logged. Now let’s understand how this magic happened?

In the above code we did something new. We have added a mysterious __proto__ key. This is the JS special way which we can use to instruct JS engine to where to lookup for a key if it not exists in an object.

Let’s see another code snippet:

The use of __proto__ is not limited to one object. By using it we can instruct JS engine to lookup for a key to n number of objects. And the object must be connected using __proto__ key forming a chain. This process of visiting objects is known as prototype chain. ( Note: Unlike. chain we wear, prototypes chains can’t be circular)

This can be understood by an analogy that Arjun knows Bheem, Bheem knows Nakul and Nakul knows Sahdev.

__proto__ represents the JavaScript concept of a prototype. Any JavaScript object may choose any other object as a prototype. __proto__ can be considered as the creator of a an object.

Let’s explore some interesting behavior of __proto__.

Shadowing

Shadowing refers to a behavior when the __proto__ object and current object itself have same key. In this case, the priority is given to the object’s key instead of the __proto__ one.

And we can check if object owns a key by using hasOwnProperty. hasOwnProperty does not look at the prototypes.

The Object Prototype

Consider following code snippet:

This object doesn’t have a prototype, right? Lets Console it.
.

.

.

let obj ={}; console.log(obj)

Surprisingly, obj.__proto__ is not null or undefined!

In JS every object has a __proto__ property which represent its creator.

1.This is the reason we can directly use .toString .hasOwnProperty along with other methods.

2. And this is the reason we have concept of Map introduced in JS(ES6). Because in JS there isn’t a data structure which we can use to simply store data in key value pare. Ofcourse we can set the __proto__ on an object to null but this isn’t a good way to acheive the functionality of a Map.

Till now we have had enough information about __proto__, now let us see what is prototype property in functions?

A prototype isn’t a special “thing” in JavaScript. A prototype is more like a relationship. An object may point to another object as its prototype.

To make it clear, let’s go back few years back, when we didn’t have the concept of classes in JavaScript. Back then developers tends to use functions to create objects:

Suppose we have created mulptiple God objects and want to share a common method among all of them. In that case we have to manually apply the function to __proto__ object. Which does not look good when we have lots of objects.

Now, here comes prototype to the rescue. Using prototype property is a two step process.

1. Instead of attaching function to __proto__ , attach it directly to function using prototype property.
2. Use new keyword to create the object.

To conclude, a function’s prototype specifies the __proto__ of the objects created by calling that function with a new keyword.

And in short, If someone asks what is prototype?
Answer: Prototype is just a property, that every function, we create in JavaScript has that points to an object. Generally we use to share a piece of code across our application.

I hope this article made you to learn something new.

Happy Coding !!!