Prototypical Programming:

This marks the beginning of a new journey: we’ve now moved on to JavaScript; a whole new language with its own structures and rules that we need to understand. So… where do we begin? I suggest the fundamentals. To start, any programming language can be broken down into a few things: its primitive data types.
The primitive data type is a basic building block, the thing by which all language is constructed. Every programming language has some form of primitive data type. This data type will denote either one or both of the following aspects:
First, they indicate that the language supports at least one basic, inherent structure and provides methods for interpreting and manipulating said structure.
Second, their existence within the language provides a basic architecture with which new and more complex data types and models can be constructed.
A key point to note about primitive data types is the following:
Most languages do not allow the behavior or capabilities of primitive (either built-in or basic) data types to be modified by programs. — Wikipedia
But you might be saying, “Wait a minute. We’ve seen monkey patching in Ruby before!” And yes the keyword in the above quote is “most”. One of the first languages to allow for modification of its basic data types was SmallTalk, a precursor to Ruby.
Both Ruby and SmallTalk allow for all data types to be modified within a program. This enables the programmer to add methods/operations to that type or to redefine it altogether if they choose.
JavaScript only has three primitive datatypes: Strings, Numbers, and Booleans. These cannot be altered programmatically or within the framework of JavaScript. For instance, I cannot make foo a number. However, within JavaScript, we have somewhat of a hybrid scenario occurring through the use of a peculiar concept: the prototype.
You may have encountered an earlier story about Ruby’s Eigenclass. For the sake of this story, we will assume the properties of the Eigenclass are known and understood and we have gleaned the following: the Eigenclass, the class unto itself, is what allows a Ruby object to have inherent methods and properties bestowed upon it.
Much in the same fashion, all JavaScript objects inherit their properties and methods from the prototype object (think a Ruby class). Below is an example from W3C:

The above example created a new prototype called Person, similar to creating a class with a capital “p” in Ruby. If we use the constructor to create a new person, we can initialize it with the functions defined within the prototype:

The prototype allows us to call the below functions on the objects we declared above:

We can even use these functions to build and declare other functions:

This process what is known as prototype-chaining and it is implicitly what we are doing when we declare and call methods on other objects as well! COOL!!
What we need to grasp is that in JavaScript, unlike in Ruby, we are not operating on systems of classes. Instead we have prototypes. Furthermore, every object has a prototype - and yes, even the prototype has a prototype. This construct is what is referred to as the prototype chain and is used to link all objects together, inheriting base properties whilst retaining their individuality. The first link in the prototype chain usually is the capital-O “Object” and most objects in JavaScript are instances of Object. The chain proceeds downwards and always ends with null.
By definition,
nullhas no prototype, and acts as the final link in this prototype chain. — MDN Docs
In similarity to the Eigenclass or Singleton Class in Ruby and many other class-model object-oriented languages, when we look up a property of an object, we look both at the object itself and the prototype from which it inherits properties, the prototype’s prototype and so on all the way up the prototype chain until either the property is found and called upon or the end of the chain is reached at null.
Lets take a look at an example of the prototype lookup chain from MDN:

Sweet. There are many other examples of applications that the prototype allows. Below this story is a list of sources for your perusal on the various implementations of this relational structure and what its further implications are.
But we’re still left wondering perhaps, why does this matter besides to possess a rather bookish understanding of the process? Well, lets go back to monkey patching. Although strongly discouraged by most, monkey patching allows us to add methods to Ruby’s primitive data types within a program and access them for later use. Much in the same manner, using an Object’s prototype chain in JavaScript can yield the same techniques.
For example, are you frustrated in a lack of concise functions to perform operations on JavaScript collections? I know I was… So let’s see what we can do about that. Let’s try adding a new method to the Array prototype built into JavaScript:
Currently the only way to access the last element in a JavaScript array is to enter the following:
array = [1, 2, 3, 4]
return array[array.length - 1]
//this is the equivalent as array[3]
//the return value is 4Using the techniques we learned about about inheritance from the prototype and declaring new functions in JavaScript from the prototype chain. lets refactor this to access the same return result in a function for all instances of Array:
Array.prototype.last = function() { return this[this.length — 1] }Now we can can be lazy and efficient and call .last or .first or any other number of functions on arrays within this program!
Sources
MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain
W3C: https://www.w3schools.com/js/js_object_prototypes.asp
StackOverflow: https://stackoverflow.com/questions/572897/how-does-javascript-prototype-work
A Plain English Guide to JavaScript Prototypes: http://sporto.github.io/blog/2013/02/22/a-plain-english-guide-to-javascript-prototypes/
