Igor Irianto

Posted on Feb 11, 2020 • Edited on Jun 15, 2021 • Originally published at irian.to

Proto and Prototype in Javascript

#javascript #proto #prototype #codenewbie

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's prototype features.

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!