Understanding Instances and Prototypes in Object-Oriented JavaScript.

Understanding Instances and Prototypes in Object-Oriented JavaScript.

Faisal Albasu's photo
Faisal Albasu
·Feb 5, 2021·

5 min read

I was taking the Object-Oriented Programming course of JavaScript on FreeCodeCamp when I across the terms instance and prototype. At first, I got confused about them so I started researching for more explanation about them and even tweeted a question about the difference between Class and Prototype in OOP. I'm a little bit familiar with classes in OOP so that was what led to the as I've never heard of a prototype-based OOP. Later, it dawned on me "why not first get their generic definitions" and that was what help me understand more of the concepts. Not to bore you out with too much backstory, let's dive in.

So what is a prototype?

Prototype according to Merriam-Webster's Dictionary means an original model on which something is patterned. So what does this mean in OOP? Well, you could say a prototype is a template on which objects are created in a program. I'll be using examples here from FreeCodeCamp's challenges. Let's say you have a dog and a bird, in programming these two will be regarded as objects. You could create a prototype for these two objects and name it Animal. Inside this prototype Animal you just created, you'll store all the properties the Dog and the Bird have in common. You can also make these two objects prototypes and create other objects under them with similar and different properties. Let's say you want to use Dog as a prototype, you can create other dogs with their separate properties like name and hair color, but they still have similar properties saved in the Dog object which is their parent prototype. The same can be done with the Bird too. These are called Instances.

Instances in common terms refer to occurrences of a certain object or material. In programming, you could say an instance is a modified duplicate of a prototype. So going back to our examples of the Bird and the Dog, we can create an instance of a Dog two instances of a Dog and give them the names Jack and Bush respectively. We can also give them hair colors of Brown and Black. The name and hair color are properties that are only available to the individual dogs, meanwhile, they still inherit other properties like 4 legs and bark from their parent prototype which is Dog. So you can see how even though we give them their different properties, they can still access the properties of the Dog prototype. This is why they're called instances because they're two different occurrences or as in this case two different dogs. The same can be done for the Bird and both the Dog and the Bird would inherit from the Animal prototype which is where their similar properties reside.

There is more to this topic than I explained in this article, but I just want to put it out for anyone having trouble understanding these terms. Hopefully, you've understood what I was trying to explain regarding instances and prototypes. Of course, if you want to go more in-depth on this topic, you can visit the FreeCodeCamp website where you can learn all about Object-Oriented Programming in JavaScript and many more from web development to machine learning.

Share this