JavaScript Object Prototypes simply explained

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!

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.