What are Prototypes in JavaScript
Tags: javascript, programming, oop, coding
Published: 2023-04-28 12:02:19

Prototype is one of the most confusing concepts in JavaScript to wrap your head around. even seasoned JavaScript developers still have a hard time understanding prototyping and how to apply it in their code base. 

JavaScript uses Prototypes and constructors to mimic class. 
But in JavaScript, we don’t have classes, what we have is object. so how can we implement inheritance using objects?


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ss1gw8kquy9tjv1wofho.jpg)

Let say we have a `Car` object, we can define another object called `Vehicle` and we add all the common behavior or common method to the Vehicle object, like:

 `drive(startLocation, endLocation)` and some how, we can link the `Car` object and the `Vehicle` object. and now we refer to `Vehicle` object as the prototype of the `Car`.

So prototype is just the parent of another object. most materials out there makes prototypes sounds complicated. so whenever you hear the word prototyping just know it is just parent.

Every object in JavaScript has a prototype or parent except for one object. objects inherits all the members define in his prototype. let see that in action.

open google chrome and go to the developer tool on the console tab, define an empty object as shown below:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aljbu2ov54av5wwij0yf.png)

you will notice a property called `[[Prototype]]` . you will also notice other properties like `constructor`, `hasOwnProperty`,and so on. 

Every object has a `constructor` property which reference the function that was used to construct that object. 

let see a diagrammatic representation of the `x` object.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bb6p94ncz2ybsz99lpgw.jpg)

so we have this x object in memory, and the x object is linked another object (lets call it the base object ). the x object inherits the properties and methods of the base object.

So every object we create in JavaScript, directly or indirectly inherits from the base object.

so the base object is the root of all object in JavaScript and so doing, it doesn’t have a prototype or parent.

let say we create another object in memory called `myobject`.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d9xygpvm6qwu0qz064h8.png)

you will observe that both `x` object and `myobject` have the same properties and methods, because they inherit from the same `baseobject`. and based on the fact that they are empty objects. that is, they do not have properties and methods of their own except for the the once they inherit from the `baseobject`.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2t34n7fr57d9gkjwb4xz.jpg)

Back in you browser developer tool, if you type in `Object.getPrototypeOf(x)`.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ksbillebzkeb6cfm5k72.png)

what you see above is the object base with its members.
an expression like as shown below will result to true. try it out on your browser developer tool.

```
Object.getPrototypeOf(x) === Object.getPrototype(myobject); 
// true 

```
 The reason is because both `x` and `myobject` has exact same prototype. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nthmawgb235cz12qimpm.jpg)

when you access the property or method of an object, JavaScript engine first look for that property on the object if it cant find it, it looks at the  `[[prototype]]` for that object which we called base object.  in JavaScript, this is what is referred to as prototypical inheritance. 


## **Conclusion**

Overall, prototypes are a powerful feature of JavaScript that allows objects to inherit properties and methods from other objects. They are very vital when one wants to create multiple objects with the same properties and methods, which makes your code DRY.