A Quick Guide To: Prototypes in JavaScript

🌁Hi Everyone!🌁

Today we will be discussing Prototypes and the Prototype Chain in JavaScript. Prototypes are definitely one of JavaScript's most difficult concepts to visualize due to its seemingly abstract nature -- however, it is actually very concrete + important for understanding JavaScript's underlying structure. Let's learn something new today!

💭💭💭💭💭💭💭💭💭💭💭💭💭

Here are our goals:

1. What is a Prototype?
2. What Datatypes have Prototypes?
3. What does it mean when we say that JavaScript is a Prototype-based language?
4. What do Prototypes give us?
5. What is a Prototype Property?
6. What is the proto property?
7. How do functions and Prototypes work together?

Introduction

Prototypes are objects associated with every datatype by default in JavaScript.

Therefore, simply put, JavaScript is considered a Prototype-based language. Whenever an instance of an object is instantiated, the JavaScript engine provides a prototype property to the constructor function and proto property to the instance of the object. But more on this later.

Prototypes allow us to define methods or properties to all instances created of a particular object. Accordingly, every instance of that object has access to the method or property. This is huge because it saves time and DRYs our code since the method or property does not have to be defined in the Object constructor function or redefined for each instance of an object.

Prototype Property & Constructors

So far, we have learned that prototype properties allow us access to properties and/or methods. To continue to understand this, it is also important to note that all object constructors have a prototype property. And every object constructor has a prototype of "Object Prototype".

Let's take a look at an example:

function Person(name){
    this.name = name
}

This is a simple Object Constructor. From this, we can create an infinite amount of instances of "Person" each with a property of "name".

The Prototype of our object constructor, Person, is "Object Prototype". We can see this if we log our object constructor in the console:

Proto Property of Instances

Now, why is this important? It is important because every instance of an object has a proto property that points to the Object Prototype of the constructor function that created said instance. And it is the proto property's job to look to the Object Prototype of the constructor to see if it has any methods or functions available to use.

We established that JavaScript is a prototypal language; JavaScript will actually continue through this pattern of looking from the proto property of an instance to the Object Prototype of the constructor until it reaches “null”. This pattern is called the Prototype Chain.

The chain expedites searching to see if an instance of an object has access to certain methods; it simply uses this "formula":

Instance.__proto__ === Constructor.prototype

If the proto property of an instance is strictly equal to the constructor's prototype, then we know that the instance was instantiated from that object constructor.

Let's see an example in the console. I created an instance of Person called "Charlie".

I then checked our little formula:

You can also check this way:

console.log(Charlie.__proto__ === Person.prototype)
// the console should return 'true'

Summary + Conclusion

I know this is a tough bit to get around. However, I hope together we were able to unpackage some of the Prototype Chain. It is super helpful to understand what goes on underneath JavaScript objects and instances to further see how your code all relates. And also how it affects other parts of your code.

** Remember, I am still learning as well as you. Please feel free to leave comments, questions + suggestions below. Happy learning! **

🌁🌁🌁