What are Prototypes in JavaScript?
Tags: webdev, codenewbie, javascript, programming
Published: 2021-01-26 13:28:57

The prototype is the simple and the hardest feature of JavaScript.  Once you get the main concept that it's just a tree or  "chain" then all of those methods like `Object.getPrototypeOf()` or the  `instanceof` operator and even **constructors**. 

---

## Objects in JS

Let's cover some JavaScript objects basics first...

```js
const obj - {
    x: 1, // property with key x and value 1
    y: 2, 
    doubleY: function() {
        return this.y * 2 // this keyword
    }
}

obj.x        // 1 - dot access
obj.['y']    // 2 - dynamic access
obj.doublyY() // 4 - method call

obj.toString() // '[object Object]'

// WAIT...!! Who defined obj.toString? 
```

### So, What is the prototype? 

Every JavaScript object has a second object associated with it. This is called its prototype. Objects inherit all of the properties of their prototypes. 

```js
const obj = {x: 1}

// get the prototype of obj: 
Object.getPrototypeOf(obj); // Object

//obj inherits properties from Object
obj.toString() // '[object Object]'
// We haven't defined the toString method but obj inherited it from it's prototype. 
```

### Creating objects

Now, let's back to objects basics for a minute. What are the ways we can create one? 

```js
// First way
let a = {a: 1}; 
 
// second way
let b = new Object(); 
b.x = 1; 

Object.getPrototypeOf(a) // Object.prototype
Object.getPrototypeOf(b) // Object.prototype
// The objects created by new Object () inherits from Object.prototype just as the object creared with { } does. 
```

There's also a third way of creating an object and it gives you freedom over which object to be used as a prototype of the newly created object.  

```js
// Third way

let c = Object.create(null, {})
Object.getPrototypeOf(c) // null
// we just created an object without prototype 
```

### Object.create()

To `Object.create()` method creates a new object, using an existing object as the prototype of the newly created object. The first parameter is the existing object. The second is the newly created object.

```js
const obj = {a: 1, b: 2}
const obj2 = Object.create(obj, {})
obj2.j = 10
obj2.j // 10 (own property)

Object.getPrototypeOf(obj2) // obj
obj2.a // 1 (inherited property)
//obj2 inherited the properties of obj

// what if we go all the way down? 
Object.getPrototypeOf(obj2) // obj
Object.getPrototypeOf(obj) // Object.prototype
Object.getPrototypeOf(Object.prototype) // null
// This is called the prtotype chain!


```

---

## Prototype Chain

(TWIST 😉) There are objects without a prototype. But 99% of the objects have it.  JavaScript's normal behaviour is giving a prototype to every object you create and making it part of the prototype chain, Only one object if the non-user defined objects don't have a prototype. This is `Object.prototype` which evaluates to null. All other objects step on the top of `Object.prototype` and they all form the chain. 

As we in the example you can also use `Object.create()` tp define an object without a prototype. Which I don't recommend if you don't know what you're doing. 

---

⌛Thanks For Reading | Happy Coding⚡

Get weekly newsletter of amazing articles I posted this week and some offers or announcement. Subscribe from <a href="https://mailchi.mp/9f73b65b9c38/rahulism" target="_blank">Here</a>

<a href="https://www.buymeacoffee.com/rahxuls" target="_blank"> <img src="https://res.cloudinary.com/rahulism1/image/upload/v1608182430/bmc_nbxakd.png"></a>