JavaScript ProtoType

JavaScript is a prototype based language. The term Prototype is another important topic of JavaScript. Without knowing it, we can’t understand the underlying structure of a reference typed JavaScript code.

Although JavaScript is a dynamically-typed language, but it has two types of data, Primitive and Reference. Primitive are String, Number, Boolean, Null, Undefined & Symbol. Reference are Array and Object. Inside every JavaScript object, array there is an another object(__proto__), where we can get some properties and methods, we call that object a ProtoType. Every object inherits properties and methods from it’s prototype.

Let’s see an example.

let country = {
    name: "germany",
    capital: "berlin"
}

If you evaluate the country object,

You can see we have some methods available such as hasOwnProperty, toString, valueOf. So now we can use(inherit) them with country object.

country.hasOwnProperty('name')// true

We can inherit the hasOwnProperty property with our country object.

If we write something that doesn’t exist in the prototype object then it goes in it’s own prototype object to check until it finds the uppermost prototype object this is called prototype chain. So we can say every prototype object has it’s own prototype object. In case if the property couldn’t find in any of it’s prototype chain eventually it will return undefined.

Just like the object, array also follows the same approach of prototype, array is also a kind of object. Here is an example.

const numbers = [10, 20, 30, 40, 50]

When we evaluate this numbers array we will get lots of properties or methods such as map, find, filter etc in our prototype object. So we can use them same way we used in object.

const find_a_number = numbers.find(num => num >= 20)// 20

This is the basic concept of JavaScript ProtoType.

Prototypal Inheritance

If you want to inherit properties or methods to you prototype object you can do prototypal inheritance. There are three ways to do this.

• Constructor Function
• Object.create
• Object.setPrototypeOf

Constructor Function

By using Constructor Function we will be able to set properties or methods to prototype object.

let city_info = {
  city: "Munich"
}

// constructor function
let Country = function(val) {
  this.country = val
}

// inheritance
Country.prototype = city_info

// actual object
let country_obj = new Country("Germany")

If you evaluate the country_obj object,

{
    country: "Germany",
    __proto__: {
        city: "Munich"
    }
}

Object.create

Object.create() is another way to add properties or methods to prototype object.

let country = Object.create({ city: "Munich" })
country.name = "Germany"

By evaluating them,

{
    name: "Germany",'
    __proto__: {
        city: "Munich"
    }
}

Object.setPrototypeOf()

In es6 you can set properties or methods into your prototype object using Object.setPrototypeOf().

let country = {
    name: "Germany"
}

Object.setPrototypeOf(country, { city: "Munich" })

Evaluate the country object,

{
    name: "Germany",
    __proto__: {
        city: "Munich"
    }
}

That’s it. If you have any question let me know.