# JavaScript : Prototype

### Prerequisites

* Datatypes
    
* Object
    

Try running the below code. We defined a new person object with properties `firstname` and `lastname`, and run `toString` method on the object.

```javascript
const person = {
   firstname:"Rohan",
   lastname:"Kamal"
}

console.log(person.toString());  // [object Object]
```

Did you notice the method `toString` returned successfully without any errors, but we never defined `toString` method in `person` object. So where it came from?

To understand it, first, we need to understand a few methods,

* Object.getOwnProperties(obj)
    
* Object.hasOwn(obj, propertyName)
    

The first method `Object.getOwnPropertyNames(obj)` returns all names of properties owned by the `obj`. Let's try for our `person` object.

```javascript
const ownProperties = Object.getOwnPropertyNames(person);
console.log(ownProperties); // // [firstname, lastname]
```

The Second method `Object.hasOwn(obj, propertyName)` checks, whether given a `propertyName` property is owned by `obj` or not. Let's try for our `person` object for `toString` property.

```javascript
console.log(Object.hasOwn(person, 'toString')) //false
```

From the above, we can confirm that `toString` does not belong to `person`. So, the question is still the same, where `toString` came from? Now let's see what else we have in `person` object. Run the below code,

```javascript
console.log(person)

/* {
firstname : "Rohan"
lastname : "Kamal"
[[Prototype]] : { 
    constructor : ƒ Object() 
    hasOwnProperty : ƒ hasOwnProperty()
    isPrototypeOf : ƒ isPrototypeOf()
    propertyIsEnumerable : ƒ propertyIsEnumerable()
    toLocaleString : ƒ toLocaleString()
    toString : ƒ toString()
    valueOf : ƒ valueOf()
    __defineGetter__ : ƒ __defineGetter__()
    __defineSetter__ : ƒ __defineSetter__()
    __lookupGetter__ : ƒ __lookupGetter__()
    __lookupSetter__ : ƒ __lookupSetter__()
    __proto__ : null
    get __proto__ : ƒ __proto__()
    set __proto__ : ƒ __proto__()
}*/
```

If you observed, `toString` is present under `[[Prototype]]` property of the `person` object. It is an internal property in every object. We call it simply the prototype of an object. Now, the follow-up question arises of where this `[[Prototype]]` came from. It means javascript is doing something behind the scene, every time we create an object.

### What is a prototype?

The `[[prototype]]` is an internal property of every object, initialized during object creation. It allows populating of common properties among objects created using the same constructor.

Let's understand it through `person` object. When we created `person` following steps were performed,

1. Call `new Object()` constructor.
    
2. Creates a new Object with `fistname` and `lastname` as properties.
    
3. Assigns `[[prototype]]` of object as `Object.prototype`.
    

Yes!, Whenever an object is created with object literal syntax, JavaScript calls `Object()` constructor. It creates a new object and assigns `[[prototype]]` as `Object.prototype`. To verify it run the below code.

```javascript
Object.getPrototypeOf(person) === Object.prototype; //true
```

`Object.prototype` is nothing, just a property of the in-built object `Object`, which gets assigned to `[[prototype]]` property of every newly instantiated object created from `Object()` constructor.

So, during the calling of `toString` method over the `person` object, JS firsts look for its own methods, if it failed to find any match then it goes into deeper into the object prototype `[[prototype]]`. To learn more about `Object.prototype` check this [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object).

The most important point to note here is that the value of the `[[prototype]]` depends on the constructor used to create the object. In the above example, we were playing with plain objects created using `Object()` constructor so all objects were assigned `Object.prototype` as prototype.

Suppose we create an array using array literal syntax as below,

```javascript
const arr = [1, 3, 4, 5, 6];
```

Arrays are created using `Array()` constructor in JavaScript, so every array object will have a prototype as `Array.prototype`. Let's verify it

```javascript
Object.getPrototypeOf(arr) === Array.prototype; // true
```

### Ways to assign prototypes?