JavaScript - Polymorphism

Polymorphism in JavaScript

The polymorphism in JavaScript allows you to define multiple methods with the same name and different functionalities. Polymorphism is achieved by using method overloading and overriding. JavaScript does not support method overloading natively. Method overriding allows a subclass or child class to redefine a method of superclass or parent class. In this chapter, we will implement the polymorphism using the concept of method overriding.

The polymorphism word is derived from the geek word polymorph. If you break the polymorph, the meaning of the 'poly' means many, and 'morph' means transforming from one state to another state.

Method Overriding

Before you understand the polymorphism, it is important to understand the method overriding.

If you define a method with the same name in the parent and child class, the child class method overrides the parent class's method.

For example, you want to calculate the area of the different shapes. You have defined the Shape class containing the area() method. Now, you have a different class for the different shapes, and all extend the Shape class, but you can't use the area() method of the Shape class to find the area of each shape as each geometry has a different formula to find the area.

So, you need to define the area() method in each child class, override the area() method of the Shape class, and find the area of the particular shape. This way, you can create many forms of the single method.

Examples

Let's understand the polymorphism and method overriding via the example below.

Example 1: Demonstrating Polymorphism in JavaScript

In the example below, the Shape class contains the area() method. The Circle and Rectangle, both classes, extend the Shape class. Also, the area() method is defined in the Circle and Rectangle class.

There are 3 area() methods defined in the below code, but which method will invoke it depends on which class's instance you are using to invoke the method.

<html>
<body>
   <div id = "output1"> </div>
   <div id = "output2"> </div>
   <script>
      class Shape {
         area(a, b) {
            return "The area of each Geometry is different! <br>";
         }
      }

      class Circle extends Shape {
         area(r) { // Overriding the method of the Shape class
            return "The area of Circle is " + (3.14 * r * r) + "<br>";
         }
      }

      class Rectangle extends Shape {
         area(l, b) { // Overriding the method of the Shape class
            return "The area of Rectangle is " + (l * b) + "<br>";
         }
      }

      const circle = new Circle();
      // Calling area() method of Circle class
      document.getElementById("output1").innerHTML = circle.area(5); 
 
      const rectangle = new Rectangle();
      // Calling area() method of Rectangle class
      document.getElementById("output2").innerHTML = rectangle.area(5, 10); 
   </script>
</body>
</html>

Output

The area of Circle is 78.5
The area of Rectangle is 50

This way, you can define the same method with different functionalities and invoke a particular one according to the required functionalities.

You can also call the parent class method in the child class using the super keyword. Let's understand it via the example below.

Example 2: Parent Class Method's Functionality Extension in Child Class

The Math and AdvanceMath class contains the mathOperations() method in the example below.

In the mathOperations() method of the AdvanceMath class, we used the super keyword to invoke the mathOperations() method of the parent class. We extend the functionality of the math class's mathOperations() method in the AdvanceMath class's mathOperations() method.

Also, when you invoke the mathOperation() method using the object of the Math class, it invokes the method of the Math class only.

<html>
<body>
<p id = "output1"> </p>
<p id = "output2"> </p>
<script>
class Math {
    mathOperations(a, b) {
       document.getElementById("output1").innerHTML =  "Addition: " + (a+b) + "<br>";
       document.getElementById("output1").innerHTML += "Subtraction: " + (a-b);
    }
}

class AdvanceMath extends Math {
    mathOperations(a, b) {
       super.mathOperations(a, b);
       document.getElementById("output2").innerHTML += "Multiplication: " + (a*b) + "<br>";
       document.getElementById("output2").innerHTML += "Division: " + (a/b);
    }
}

const A_math = new AdvanceMath();
A_math.mathOperations(10, 5); // Calls method of AdvanceMath class

</script>
</body>
</html>

Output

Addition: 15
Subtraction: 5

Multiplication: 50
Division: 2

This type of polymorphism is called runtime polymorphism, as the JavaScript engine decides which method it should execute at the run time based on which class's instance is used.

Benefits of using Polymorphism in JavaScript

There are many advantages to using polymorphism in JavaScript; we have explained some of them here.

Code reusability − Polymorphism allows you to reuse the code. In the second example, we have reused the code of the mathOperations() method of the math class.
Extensibility − You can easily extend the current code and define new functionalities.
Dynamic behaviors − You can have multiple classes containing the same method with different functionalities and call the method of the particular class dynamically at the run time.

You can't achieve the compile time polymorphism in JavaScript as you can't overload the method.

Print Page