Javascript Prototype - Whats that?
Tags: javascript, prototype
Published: 2020-07-04 13:13:22

---
title: Javascript Prototype - Whats that?
published: true
description: An overview about prototypes
tags: javascript,prototype
//cover_image: https://direct_url_to_image.jpg
---

#Introduction
You may know Javascript. You may know what a Prototype is. But you ask yourself: What are prototype in a javascript context?

Let me explain it to you in a few words and then show you some code for a better understanding.

In Javascript all objects inherit their methods and properties via prototype. Thats it. Thanks for reading!
No, joking aside. What does that mean?

Well date objects inherit from Date.prototype, array objects from Array.prototype and so on:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/k38gydtfvr5o4st91dor.png)

And all and i mean ALL objects inherit in the end from the object prototype. For example our array object you see above inherit from Array.prototype and this in turn inherit from object prototype.

Everything inside of the prototype can be called directly on the newly created Object. That is the reason why you can call myArray.push() or myArray.length. This way we dont have to overload our objects and put every method and every property on each instance of our object. We use prototypes for that!

Go ahead and copy the code you see above and see whats inside of __proto__ to get a better understanding.

#Code Example
Let´s dive into some code. I encourage you after you read this article to grab this code and play with it. Thats the best way to learn and understand what prototype is and where and why to use it.

First we define a constructor:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vpt1a4w83f6uku914pc6.png)

You can see right now its an object which inherit from object prototype:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4jpjt0l43og2l2m1f02h.png)

Here we use the prototype of our object to enhance it with a new method. You may noticed that inside of this new method we have **access to the company property** and its possible to directly call this method on our mac object **(like Array.push, thats pretty cool!)**:

![Alt Text]
(https://dev-to-uploads.s3.amazonaws.com/i/2rsezudju8v1paylbpog.png)

In the browser we see our new method appears under __proto__ and "Apple" is logged to the console because we ran the new method:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/f6a601xpoteisme8t3yi.png)

Its also possible to change properties with prototypes. Here you can see how we change the ram property and also create a new property named storage with a new method we define:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jl3e6hu3srujzj7io75k.png)

The ram has changed:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/85kb2k9nzlq3gf0pma4u.png)

##Prototype Inheritance
With prototype inheritance we can use objective-oriented programming paradigms. More about this later on. Lets dive back into the code.

Here we create a new constructor "WorkLaptop" and use the apply keyword. It may looks confusing but its just there to call the constructor from our Computer object. In addition we create a new property "forWork".
On the next line we inherit the prototype from computer to our new WorkLaptop object with **Object.create (the reason: under the hood prototype is just a object)**:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yd1cnf67w58jo5e9izl5.png)

Give yourself a few minutes and understand what exactly is happening here.
We created a new constructor named WorkLaptop and called the constructor from our Computer object. We also created a new property named "forWork". **Now** under __proto__ we see our new "working" method and another __proto__! Thats the prototype from Computer!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/asrbrbbroju2lpquoniy.png)

Now we can call "working", "changeRam" and "getCompany" on our WorkLaptop object!

#ES6
With ES6 we got classes in javascript. Its syntactic sugar for prototypes. For many people its much easier to use and read than prototypes. I just want you to understand that under the hood when you use classes javascript still does all these things with prototypes you saw above.

#Great Resources
Here are some great resources for you if you want do dig depper into javascript prototypes:
Traversy Media: https://www.youtube.com/watch?v=vDJpGenyHaA&
The Net Ninja: https://www.youtube.com/watch?v=Fsp42zUNJYU&
W3Schools: https://www.w3schools.com/js/js_object_prototypes.asp

#Summary
It´s not the easiest javascript feature to get but i hope i gave you a basic understanding. I needed some time to fully understand whats happening and more important why and how. My tip for you: Write some code (feel free to take the code you saw above) and play around with it. **Practice is the key!**

Feel free to drop comments if you have questions or find a mistake. I love to develop myself each day and whats better for improving than mistakes? :)
I wish you a nice day and stay safe.