Proto and Prototype in Javascript
You probably heard that Javascipt is a prototype based language.
What does that mean?
According to MDN, it is how Javascript objects inherit features from one another.
On the other hand, if you inspect an object you just created, say an array const arr = [1,2,3], you'll see __proto__. What is that? Why does it sound like prototype and how is it different from prototype?
As you are reading this, I highly recommend you to code along - open up chrome dev tool and follow along.
__proto__
In you browser console, create an empty array ([]). Then expand the > icon, you will see that it has proto attribute:
[]
length: 0
__proto__: Array(0) // <-- found it!
length: 0
constructor: ƒ Array()
concat: ƒ concat()
// ...etc
You will always find proto however you construct your array:
const donut = ['chocolate', 'glazed', 'plain']
const juice = new Array('orange', 'apple')
So what are they?
If you visit MDN Array Doc and go to left nav under "Properties" and "Methods", you would see exact same list of what you just saw in your array's proto!
Coincidence?
I think not!
Whenever we construct a new array, proto looks for an array blueprint (because our new array automatically uses Array constructor). It references all properties and methods from that blueprint. If you type Array.prototype (the "A" is capitalized), you'll see exact same method list as the one inside donut.__proto__.
Array is the blueprint provider. donut references the original blueprint.
So proto is Javascript's way to reference to the original prototype.
__proto__ in everything
This applies to any object in Javascript, as long as there is a blueprint for it. Let's see some examples:
const obj = {iggy: 'He is pretty cool'} // type this
// you see that it has __proto__
obj
Guess where obj got its prototype from? Yup, Object.
Object.prototype
constructor: ƒ Object()
__defineGetter__: ƒ __defineGetter__()
__defineSetter__: ƒ __defineSetter__()
// ...etc
Let's look at another example:
const myHead = window.document.head
console.dir(myHead) // console dir gives a list of attributes
If you scroll all the way down, you'll find a proto of HTMLHeadElement. Let's check that blueprint:
HTMLHeadElement.prototype // type this
You'll see exact same features as myHead's proto.
Adding to prototype
You can add to the blueprint with your own method. For example:
Array.prototype.yummy = () => console.log("In my tummy")
Any existing or future array will have this yummy method. donut can use that new method we just created:
donut.yummy() // "In my tummy"
Let's create a new array:
const lunch = ['burger', 'fries', 'salad']
lunch.yummy()
If you look at its properties, you'll see yummy inside proto:
(3) ["burger", "fries", "salad"]
__proto__: Array(0)
yummy: () => console.log("In my tummy")
length: 0
// ...etc
Conclusion
What did we learn?
- Anything we create in javascript references methods and properties from its blueprint
- That blueprint contains features under
prototype(that you can add/modify) __proto__is Javascript's way to reference the original blueprint'sprototypefeatures.
Much more can be said about Javascript prototype. This is just the tip of the iceberg, but I hope it helps to get you started to dig deeper on your own! Thanks for reading and happy coding!