The Javascript Prototype as a Backpack
One month ago, our bootcamp cohort moved from lessons on Ruby/Ruby On Rails to vanilla Javascript. It was made clear to us that making this switch in our education would be no easy feat and initially, this was very true. As a completely green coder three months prior, it had taken me some time to wrap my head around Ruby, an Object Oriented, class based coding Language. Javascript, although based completely on Objects, is a functional-based programming language. In a bootcamp there isn’t much time to explore each aspect of a language at length and I just couldn’t grasp on to the basics of JS. The MDN documentation can seem a bit daunting and with many of the built in JS methods that are readily available to us, I was even more confused by MDN’s heading for each method on the doc pages.
Then, Javascript’s prototype showed itself to me! It was like the clouds parted and the sun shown down and I had that ‘ah-ha’ moment.
While it’s true that JS is a functional programming language, it’s even more clearly a prototypal language. If everything in Javascript is an object…even more distinctly, everything is a prototypal object. A prototypal object is a model for all proceeding objects to inherent from. Any following objects will share the preceding object’s properties. It was shared with me, as someone who needs to visualize what’s happening in the background, that I should think of this as there’s an original object, a parent object, that has a backpack full of information…built in functions, properties, etc. With each child the parent object gives this backpack to its child to use, this proceeding child object and each of its child objects that come after it, will have full use of this backpack from the original prototypal object! Mind Blown!!!!
Through the ‘prototypal chain’ a grand-child object inherits from the parent object through the child object. Every object in Javascript has what has become known as the dunder proto === __proto__ . This dunder proto, once called on, will directly point to the prototype object of the inherited function that created this current object. For example, in our console we can call exampleObject.__proto__ and returned to us will be the backpack that exampleObject inherited from its parent.
Learning about the dunder proto and the idea of JS as a prototypal language helped me to wrap my head around inheritance and in turn lexical scope, closure and execution context. All of these ideas are key in JS coding. Without understanding inheritance and scope, it can be difficult to know how to compose JS code.
Going one step even further will directly lead us to finally understanding exactly what the MDN documentation means in there headers of ‘built-in’ Javascript functions; ex: Array.prototype.forEach(). Again, everything in JS is an object, even javascript itself. So everything, including JS as the ‘original’ constructor, sends along its prototypal backpack, even Arrays!
