Day 8: Let’s solve the mystery of Prototypes

Hey, Do you have simple explanation for Prototypes today?

🤪 Kind of, It took me several days to simplify it as much as possible!!
Hey, Do you know inheritance in any other language?

Yeah, I know about it. 🤓

Let's forget everything for now.. because Javascript Prototypal Inheritance is completely different.

🤔 Ohhh!! So this Prototype is used for inheritance?

Sorta!! Let's check it with an example. 

In this constructor function, I can pass name and type of Pokemon.
and if you notice on line 8, I can access name property with dot notation something like `pikachu.name`.

Yeah, I noticed it, Its all normal Javascript, What’s the big deal 🧐?

Okay, So you must know that you can do `pikachu.toString()` or `pikachu.valueOf()` and many other properties and functions you can access, Ever wondered where it came from 🧐?

Obviously, This is provided by Javascript 😜

Yep 😂😂😂😂😂😂😂
When you don't know specific, keep it generic!! Nice strategy!!
😂😂😂😂😂😂😂😂😂😂😂😂😂😂
Okay, Jokes apart, Let's dive deep.
Let's take an example of an array, it will be super easy.

Now in this example we have an array of Pokemons. We never defined property length in this array but it is provided by Javascript.
You can access such properties via `Array.prototype`.

Hey!! I can see length property, but all these functions like map, filter, flat, forEach etc etc , I use it my daily dev life. Are you saying whatever property or functions I have in Array.prototype , I can use it for any array in my program ????? 🤯🤯🤯

Yep, 🥳 You are absolutely correct.
Let's imagine you don't have `map` function in Javascript and you need to provide polyfill for it. How would you do that?

If I attach my own function to this Array.prototype will this work?

You can try now !!

Okay!! Map is just looping through all the items and apply callback on each item and return new array with modified values.

Let’s do it.

(SideNote: I assume you have read previous posts and you know how this program works 😁, and its nothing fancy tbh)

😈 This looks like a super power. This will be same for functions and objects as well right ?

🤪 You can call it super power, but the point is, this is possible because of Prototypal inheritance and yes!! this will be the same for functions and objects.
Okay, Let's talk more about it.
In simple language, 
You can consider `Array` or `Function` or `Object` as parents of whatever you create or initialise in your program.
In below example `arr` array inherits from `Array` and same should work for `Function` and `Object`.

Okay, So long story short

• Array, Function and Object are acting as parent here.
• If I attach property or function to the Parent via prototype then it will be available in all the array, function or object respectively.

but what is this __proto__ 🧐?

hehe long story short, __proto__ and prototype both are same.
The only thing different is how you access it.
prototype is accessible on Parents. (Array, Function, Object).
__proto__ is accessible on initialised variables of these parents.
but they serve same purpose.

That means instead of Array.prototye.myMapFunction if I do arr.__proto__.myMapFunction both are same ?

Exactly 🤘

Okay, What else?

Do you know what is parent of Array or Function or Object 🤓?

😳 How can i find it?

You can use Array.prototype.__proto__ to access Array parent and Function.prototype.__proto__ to access Function parent.

All three are same, So we can conclude that Object is the parent of Array and Function.

Okay, What is parent of Object then ?

Let's find out together.

Aha!! So Object is Parent of everything in Javascript.

hehehe, Yes, It is also called as Prototype Chain.
Check below example.

Okay, When I heard about Prototype Chain, It seemed like some complex algorithm 😜 but it is easy.

Also to be honest, I never was checking diagrams in that much details, but these pictures, I have to carefully check them and it seems so much clear than before thanx.

Yeah, You are smart. 
By the way if you check things in pictures carefully then you will never forget it, My idea behind is this. If i explain then its again same borring stuff. 
I want you to scratch your head little bit 😁.
Sorry if I bother you too much 😜.
See you again with another question.
Don't forget to join me on Twitter, LinkedIn and Github.
I share lot of cool tips and tricks regarding PHP, Laravel, Javascript, Vuejs, Nuxtjs, Reactjs, databases, workflows, productivity etc etc. 
https://twitter.com/rckstrbhushan
https://www.linkedin.com/in/rckstrbhushan
https://github.com/bhushan
Take care and stay safe. Cheers 🥂

Cheers 🥂