What is prototype in JavaScript

Chidanandan P
Jun 17 · 4 min read

Prototype is one of the most feared concept in JavaScript. But don’t get overwhelmed by this keyword. This article explains what is prototype and why we call JavaScript is a prototype based object oriented language.

Let’s take an example with a simple object:

let countryDetails = {
name: "India",
code: "+91",
continent: "Asia"
};

Now we can access the properties of this object using dot operator:

countryDetails.name       // "India"
countryDetails.code // "+91"
countryDetails.continent // "Asia"

It’s straightforward right, but apart from accessing the properties which are inside countryDetails object, we can also access few other methods like toString, hasOwnProperty and so on.

First we need to understand from where these properties/methods are secretly getting added to our countryDetails object.

Every object we create or define will inherit few properties from Object. Object is Javascript inbuilt keyword which has a property called prototype.

This prototype property of Object is in-turn a simple object containing few methods like toString, hasOwnProperty etc.

That’s the reason our countryDetails object also has these secret properties which are inherited from inbuilt Object.

Every object we create will be having a property named __proto__ , which points to the Object.prototype.

By the above statement we can conclude countryDetails.__proto__ is equal to Object.prototype.

Now let’s take an another example, but this time with an array.

let gamesList = ["Football", "Cricket", "Baseball"]

As you already guessed, even this gamesList array also has few useful methods like length, push, pop, sort and so on.

We can access these useful array methods because it inherits these methods from Array. prototype is also another Javascript inbuilt keyword which has a property called prototype.

Similar to the previous example with object, every array we create will be having a property named __proto__ , which points to the Array.prototype.

So we can easily say gamesList.__proto__ is equal to Object.prototype.

Similarly all types of data we use in JavaScript will be having their own secret methods.

Note: Even though strings, arrays, sets and maps are not individual data types in Javascript, they are having their own special keywords to accommodate specific methods.

Now let’s understand why we call “Everything in JavaScript is nothing but object”

Even though all kinds of data like Array, Function, Set, Map, Boolean have their own prototype object with useful properties, inside this prototype object there’s a property called __proto__ which always points to Object.prototype.

Don’t get confused, I’ll explain in simple way:

gamesList.__proto__ === Array.prototype;          //trueArray.prototype.__proto__ === Object.prototype;   //trueFunction.proptype.__proto__ === Object.prototype; //trueSet.proptype.__proto__ === Object.prototype;      //trueMap.proptype.__proto__ === Object.prototype;      //trueBoolean.proptype.__proto__ === Object.prototype;  //true

Ultimately all data types in JavaScript inherit methods from Object.prototype.

Finally when we try to access Object.prototype.__proto__ it gives null value. The way of tracing back from gamesList.__proto__ to Object.prototype.__proto__ is called prototype chaining.

If you are still confused, take a look into how the prototypes are traced back to Object.prototype.

  1. Trace an array back to its prototypes:

2. Trace a function back to its prototypes:

The priority of accessing these prototype methods in different levels are based on prototype chaining.

The real power of prototype is when we add custom methods to prototype object and utilise it in any of the variables under that type. I’ll show how we can develop such custom methods with practical examples in my next article.

Let’s recall what we have learnt so far about prototype:

  1. prototype is an object which has powerful inbuilt properties inside it like push, pop, slice and so on for an array. And split, charAt, truncate and so on for strings. And call, bind and apply for functions.
  2. Innermost prototype object can be accessed via __proto__ property and can be traced back to Object.prototype.
  3. Apart from data specific prototype methods like push, pop for array and split, charAt for strings, we can also access isPrototypeOf, hasOwnProperty and other properties from Object.prototype.
  4. The priority of accessing these prototype methods are based on prototype chaining.

Chidanandan P ( if the name is difficult to pronounce call him Chidu ) is a software development engineer at Lowe’s, where he helps in building the technology and solutions that powers Lowe’s and its various businesses.

Geek Culture

Proud to geek out. Follow to join our 1M monthly readers.