JavaScript Object Prototypes simply explained
Tags: javascript, webdev
Published: 2023-05-24 19:31:45

Did you hear about object prototypes but you weren't sure what they exactly do? They are mentioned here and there but you never got in touch with them? The concept of object prototypes is not difficult and when you will have a better understanding of their purpose, suddenly other principles will get more clear to you as well. For example, how JavaScript Classes work.

Let's start with an explanation of JavaScript objects. What they are and how they behave.

## JavaScript Objects
Object is one of JavaScript's _data types_. Object can have properties holding values as key-value pair. Property value can be a value of any type. It can be for example string, number, or function. When the value is a function, then it is called the object's _method_. 
Object is created by using curly braces `{}` but can be also created by a call of `Object()` constructor. The second option is not used much in daily work.
This is example of the initialization of a new simple object.

```
const vegetable = {
  taste: 'good',
  isHealthy: true,
  calories: 65
}
```
We create a new object called `vegetable` with three properties describing the vegetable. And that is. The object is another type of how to describe data.
Object property can also point to another object. We can illustrate it in the example of the vegetable `zucchini` which was originally bred in Milan, Italy.
```
const milan = {
  name: 'Milan',
  country: 'Italy'
}
```
```
const zucchini = {
  color: 'green',
  taste: 'delicious',
  placeOfOrigin: milan
}
```
Then, we simply use dot notation to get the name of the zucchini's place of origin, `zucchini.placeOfOrigin.name` is `Milan`. 

## Object Prototypes
Let's move further and investigate if that's all that the object includes!
If you log an empty object into a console, you can see that the object isn't actually empty! There are a lot of extra methods. Those methods `toString()`, `toLocaleString()`, `valueOf()`, and more are defined in the object _prototype_!

![Log on JavaScript empty object](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gqfoav3na68sxqhlft9a.png)

Object prototype is a built-in property that every object has. Prototype itself is an object that has another prototype and optional properties. It adds an additional description to the original object. Now, we will explain it with an example.

We have the `vegetable` object with a few properties.
```
const vegetable = {
  taste: 'good',
  isHealthy: true,
  calories: 65
}
```
Then, we define the `vegetable` as the prototype of the `zucchini` using the `__proto__` property.
```
const zucchini = {
  color: 'green',
  taste: 'delicious',
  placeOfOrigin: milan,
  __proto__: vegetable
}
```
###Prototype chain
When we want to know what color zucchini has, it takes a look if the object `zucchini` has a property called `color`, it has and returns its value `green`.
`zucchini.color` is `'green'`

Then, if we want to know how many calories zucchini has, it checks `zucchini` object, there is no `calories` property. It continues to take a look into `prototype` object. And `__proto__` refers to `vegetable` that contains `calories`. It then returns the value `65`. 
`zucchini.calories` is `65`

Also, if we want to know the taste of the zucchini, it goes to `zucchini` object, finds the property `taste`, and returns the value `delicious`. It doesn't continue with searching for the taste in prototype although there is also a defined `taste` property. This is called _shadowing_ the property.
`zucchini.taste` is `'delicious'`

Lastly, if we want to know the value of the property `isVegan`, then it checks `zucchini` object. There is no property called `isVegan`. It continues to the prototype object. It is the object `vegetable` but there also isn't any property `isVegan`. Therefore, the value is `undefined`.
`zucchini.isVegan` is `undefined`

And that's it! Prototype is used for many powerful features in JavaScript. We can combine objects and reuse the code. Prototype is leveraged for _inheritance_ in JavaScript and is hidden under the roof of JavaScript _Classes_.

## Recapitulation
We learned what are the objects in JavaScript and that they can have properties with values. Property value can point to another object. Further, we found out that an empty object is not quite empty but has built-in methods in the `prototype` object. We can add properties to the prototype, it is called prototype chaining and it extends the original object. This principle is used for _inheritance_ in JavaScript.