JavaScript Objects and its secret associates: Prototype
Tags: webdev, javascript, security
Published: 2024-02-11 19:49:48

In my blog post, "[JavaScript Objects and their Hidden Attributes](https://dev.to/ms_74/javascript-objects-and-its-secret-associates-3bi2)," I generally covered the concept of JavaScript's hidden attributes. This article will provide more information on the prototype and its uses.

If you open a browser console in the Devtools and create an object literal like this: `const myObj = {};` and then try accessing the new object properties by typing in `myObj.` in the console, you will see a list of suggested properties.

![list of myObj properties in console](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cdojtq4heaz5go130awh.png)

When you create an object, it is assigned an internal property called `prototype` (is shown as `__proto__` in the browsers, also seen in the screenshot above), which is itself an object having its own prototype object. This property is actually a reference to another object, which may also have a prototype property referencing yet another object, and so on until it reaches the top-level object. The top-level object is known as `Object.prototype` and does not have a prototype property. All the properties listed in the console come from this `Object.prototype`. This linking of the properties starting from the object until its top-level object through its prototype is called the **prototype chain**. 

If you want to determine the prototype object of your `myObj` in the console, simply type in `Object.getPrototypeOf(myObj);`. This will display the final prototype object, which you can confirm by checking the value of `__proto__`. As I mentioned earlier, end-level objects do not have a prototype, so the value of `__proto__` will be `null`.

![prototype object of myObj in browser console](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yfuo0qmum9qt59ljfbma.png)

There is a not-so-recommended way to access the prototype - `myObj.__proto__`, which I will explain later. The standard way is the `Object.getPrototypeOf()` method.

It's worth noting that not all objects have `Object.prototype` as their prototype object. For instance, if you create an object using the Array constructor, its prototype will be `Array.prototype`. However, if you trace the prototype chain of `Array.prototype`, you'll eventually find that `Object.prototype` is at the end of the chain. Same with the case of the Date object. 

What is the purpose of all this? Do you remember the accessor property of the object, i.e., the 'get' property? The 'get' property follows this prototype link for the GET operation of finding an object's property all the way up the chain until it finds it.

You can use `Object.create` or constructors to manipulate the properties an object can inherit as below.
```
const myPrototype = {
  welcome() {
    console.log("Welcome!");
  },
};

const myObj = Object.create(myPrototype);
myObj.welcome(); // Welcome!
```

```
const myPrototype = {
  welcome() {
    console.log(`Welcome, ${this.name}!`);
  },
};

function Guest(name) {
  this.name = name;
}
Guest.prototype.welcome = myPrototype.welcome;
//OR
//Object.assign(Guest.prototype, myPrototype);

const newGuest = new Guest("Mariam");
newGuest.welcome(); // Welcome, Mariam!
```
The main benefit of this is that inheriting common properties for newly created objects supports object-oriented programming in JavaScript. Classes and constructors use these prototype features under the hood.

By now, you must have understood clearly what a prototype is and its uses. However, the ability to modify an object's prototype can also make your code vulnerable to security threats. In my next article, I will be exploring this topic in detail. So, stay tuned to learn more.