Javascript Prototypes and Prototype chaining
Tags: javascript, frontend, webdev, beginners
Published: 2023-05-16 08:17:45

---
title: Javascript Prototypes and Prototype chaining
published: true
series: Javascript core concepts
date: 2021-12-16 13:01:26 UTC
tags: #javascript #frontend #webdevelopment #beginners
canonical_url: 
---
![Javascript Prototypes and Prototype chaining](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yntyjl1al1xbp426okdv.png)

## Prototypes in Javascript

To understand this let's jump directly to a simple example below :

```javascript
let details = {
  name: "John",
  country: "India",
  getInfo : function() {
    console.log(`My name is ${this.name}. I live in ${this.country}`)
  } 
}

```

**Everything in javascript is an object**. In the above code, we have taken an object named _details_. This object has a few properties such as _name_, _address_ and a function _getInfo_. Let's try to access these properties.

![image1.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1639655159490/2EFakzY7v.png)

Oh! What are these extra properties other than _name_, _address_ and _getInfo_. Where are they coming from? They are added by the javascript engine automatically. All these extra properties reside inside a property **\_\_proto\_\_**. Yes, and here prototypes come into the picture.

![image2.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1639655830470/7qVzn_A-d.png)

The Object constructor has the property _prototype_ which is the same as the **\_\_proto\_\_** property in the _details_ object, as _details_ are of type _Object_. So we can say that every entity in javascript such as an array, function, the variable has this property **\_\_proto\_\_** and each of the predefined types such as _Functions_, _Arrays_, and _Objects_ all have the property prototype residing in it.

![image3.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1639657502166/8qPjy-wv1.png)

## Prototype chaining

Prototype property resides not only in **objects** but even a **function** , an **array** has this automatically generated property because everything in javascript is an object. So, let's consider the array of strings _names_

```javascript
let names = ['John', 'Danny']

```

When you access the **\_\_proto\_\_** property of the above array _names_, you can see that **\_\_proto\_\_** contains another **\_\_proto\_\_** property inside it. So, remember? Everything is an object in javascript. Therefore, this _names_ array will have it's own **\_\_proto\_\_** with the **\_\_proto\_\_** of Object because the array is also an implementation of type Object internally. From this, we can say that even functions, arrays, and variables will have **\_\_proto\_\_** in its **\_\_proto\_\_** property. And this is what is called **prototype chaining**.

![image4.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1639658184118/TGDgB5hgj.png)

Now, can you guess what must be the **\_\_proto\_\_** of **\_\_proto\_\_** for Object? It's **null**. Yes! because there is nothing after an Object. The Object type is itself a building block of everything!

![image5.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1639658796754/4Zq_mekdf.png)

This automatically added extra properties ( **\_\_proto\_\_** ) can help inherit the properties and functionalities between the objects and in this way javascript inheritance works!

I hope you have got to learn something interesting today and hope this will help you in your next interview as well.