What is prototype in JS?

Photo by James Harrison on Unsplash

In this story we will discuss about the concept of prototype in JavaScript and how it helps solving the issues related to OOPs in JavaScript.

But first let’s see what the problem actually is! let’s understand it via below code:

Let’s say we have a constructor function Todo() that is generating us a bunch of todo objects.

function Todo(name,status){
 this.name = name;
 this.status = status;
 this.getTodoName=function(){
  console.log(this.name);
  }
 this.getTodoStatus = function(){
  console.log(this.status);
  }
}
const todo1 = new Todo("call alex",true);
const todo2 = new Todo("buy medicines",false);
console.log(todo1,todo2);

If you see the output that the program logs you will see that we are kind of duplicating the same method on every object.

So, you might think that okay…. this is not that big of a problem. But consider a scenario where your construction function consists of 10 methods and you have to create 100 objects out of it… so that would be like 1000 functions!

And those function would use lot of memory and this can bug down your application! So here comes prototype in picture.

What is a prototype?

A prototype is simply a reference to another object that contains common properties and attributes across all instances.

Which means in our example, we can add the common methods like getTodoName() and get TodoStatus() to our constructor function’s prototype.

In that way we will not be duplicating the code on each instances (i.e. in todo1 and todo2).

How to do that? see the below code:

function Todo(name,status){
 this.name = name;
 this.status = status;
}
Todo.prototype.getTodoName=function(){
  console.log(this.name);
}
Todo.prototype.getTodoStatus = function(){
  console.log(this.status);
}
const todo1 = new Todo("call alex",true);
const todo2 = new Todo("buy medicines",false);
console.log(todo1,todo2);

Now, if you console.log the output you will see that it work the same but you will find that now we are not directly adding the methods to our objects- we are putting all our common properties in one place that is the prototype.

So what your todo1 and todo2 object will do is like they will check that whether they contain those methods or not. If no then they will look into their prototypes.

Now, let’s see the more practical usage of prototype in JavaScript language. Everyone is aware of the arrays in JS. now if you create an array this is what it looks like when you console.log the array:

However, we have access to array methods like array.pop(), array.shift(), array.push() etc. and these methods work!.

If you look closely to the array output you will see that it contains prototype properties in it. and when you expand it:

You will se all the methods associated with the array. Which means that all the objects that you create inherits all the prototype methods from the Array constructor function.

Prototypes can be a bit confusing sometimes, this story covers the prototypes on a high level so that you can get started with prototype. The best practice is to use the prototype to attach method to the constructor function rather than declaring them directly.