Overriding methods in JavaScript using prototypes
Tags: javascript, coding
Published: 2020-02-16 18:08:09

---
title: Overriding methods in JavaScript using prototypes
published: true
description: How to override methods in JavaScript
tags: JavaScript, Coding 

cover_image: "https://images.unsplash.com/photo-1518932945647-7a1c969f8be2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2089&q=80"

---

JavaScript is not considered as  a fully object oriented programming language instead it is known as a object based programming language or a prototype based language. That means JavaScript supports some of object oriented concepts to some extent but not fully supported. Confusing right? Some may even argue that JavaScript has classes. Yes it has the `class` keyword introduced in ES2015 but it is considered as 'syntactical sugar'. Underneath it is still prototypes running the business. So in this article we are going to learn about how to override methods in JavaScript and what is happening underneath with prototypes.

###Prototypes

First of all, lets have a little look into prototypes in JavaScript. A prototype has the same meaning as a parent class in OOP languages but at the same time it is different. In JavaScript, each and every object or function has a linked prototype.  For example if we run the below snippet in a console we can see the prototype of a function.

```
function someFunction(){}
console.log(someFunction.prototype);
```

Output: 

```
{
    constructor: ƒ someFunction(),
    __proto__: {
        constructor: ƒ Object(),
        hasOwnProperty: ƒ hasOwnProperty(),
        isPrototypeOf: ƒ isPrototypeOf(),
        propertyIsEnumerable: ƒ propertyIsEnumerable(),
        toLocaleString: ƒ toLocaleString(),
        toString: ƒ toString(),
        valueOf: ƒ valueOf()
    }
}
```

The above output is the prototype of the function `someFunction`. In here you may notice a property called `__proto__`. This is the prototype of the `someFunction`'s prototype. This is called as the chain of prototypes and it will go and go on until the `__proto__` becomes null.  
now let's create an instance of this `someFunction` and add some new properties to it.

```
let someOtherFunction = new someFunction();
someOtherFunction.someOthervalue = 'new value';
console.log(someOtherFunction);
```

Output:

```
{
    someOtherValue: "new value",
    __proto__: {        
        constructor: ƒ doSomething(),
        __proto__: {
            constructor: ƒ Object(),
            hasOwnProperty: ƒ hasOwnProperty(),
            isPrototypeOf: ƒ isPrototypeOf(),
            propertyIsEnumerable: ƒ propertyIsEnumerable(),
            toLocaleString: ƒ toLocaleString(),
            toString: ƒ toString(),
            valueOf: ƒ valueOf()
        }
    }
}
```


Here we can see that adding a new property to the `someOtherFunction`  did not affected the prototype of it but added a new property on top of it. This is the point we are going to utilize to override methods. 

###Override methods

Let's check the below snippet. In here lets use objects instead of functions.
```

let person  = {
  fName:'John', 
  lName:'Pillip',
  age: 23,
  getName: function(){
      return `${this.fName} ${this.lName}`
  },
  getAge: function(){
      return `${this.age} years`
  }
}

console.log(person.getName());
console.log(person.getAge());


// create an instance from the person object
let newPerson = Object.create(person);

// instead of a new property, let's add a function with the same name 
newPerson.getName = function(){
  return `${this.lName} ${this.fName}` 
}

console.log('');
console.log(newPerson.getName());
console.log(newPerson.getAge());


```

Output:

```
"John Pillip"
"23 years"

"Pillip John"
"23 years"

```


So let's breakdown what's happening. First we created a `person` object and the `getName()` ran the way we expected. Then we created a new instance of the `person` called `newPerson`. Here comes the interesting part, we add a function called `getName()` to the `newPerson` . Now when we ran the snippet, `newPerson` executed its own `getName()` function and override the `getName()` of `person`. Yay method overriding!. Okay but why that happened. Let's take a look at the `newPerson`.

```
{
    getName: ƒ (),
    __proto__: {
        fName: "nuwan",
        lName: "karunarathna",
        getName: ƒ (),
        getAge: f (),
        __proto__: Object
    }
}
```

As we can see the prototype of the `newPerson` has the `getName()` method which is the original method but now `newPerson` also has its own method called `getName()` . So at runtime, when we call the `getName()`  of the `newPerson` JavaScript will check whether the `newPerson` has a own method called `getName()` and in our case it has, so JavaScript executes that method  and ignores the `getName()` of the prototype of the `newPerson`. This is called shadowing methods. Now in contrast when executing the `getAge()` JavaScript checks whether the `newPerson` has a own method called `getAge()` but it doesn't and now it will check the prototype of the `newPerson`  to find a method with that name to execute it and luckily it does so it will be executed but if it did not had a matching method, JavaScript will perform this searching through the prototype chain until a method is matched.

So this is how we can override methods in JavaScript and we learned how it is happening underneath with the prototypes. We can use the above technique for override properties too. 

So in summary we can easily override methods and properties in JavaScript and it is good to have an understanding about how it is actually happening too.

Let's meet in another article. Until then, Happy coding! :)