Proto and Prototype in Javascript
Tags: javascript, proto, prototype, codenewbie
Published: 2020-02-11 19:10:11

---
title: Proto and Prototype in Javascript
published: true
description: What are proto and prototype in Javascript?
tags: javascript, proto, prototype, codenewbie
canonical_url: https://irian.to/blogs/proto-and-prototype-in-javascript
---

You probably heard that Javascipt is a prototype based language.

What does that mean? 

According to [MDN](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes), 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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) 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!

![Coincidence? I think not!](https://dev-to-uploads.s3.amazonaws.com/i/48ruv4mri60798fuv3ex.gif)

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?
1. Anything we create in javascript references methods and properties from its blueprint
2. That blueprint contains features under `prototype` (that you can add/modify)
3. `__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!

# Resources/ More Readings:

- [Proto vs Prototype in Javascript](https://stackoverflow.com/questions/9959727/proto-vs-prototype-in-javascript)
- [Understand NodeJS Javascript Object Inheriteance](https://hackernoon.com/understand-nodejs-javascript-object-inheritance-proto-prototype-class-9bd951700b29)
- [Javascript in Plain English](https://medium.com/javascript-in-plain-english/proto-vs-prototype-in-js-140b9b9c8cd5)
- [Why some attribute names start with double underscore in JavaScript?](https://stackoverflow.com/questions/6547293/why-some-attribute-names-start-with-double-underscore-in-javascript) 🤔