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.
Open Compiler
<html><body><div id ="output1"></div><div id ="output2"></div><script>classShape{area(a, b){return"The area of each Geometry is different! <br>";}}classCircleextendsShape{area(r){// Overriding the method of the Shape classreturn"The area of Circle is "+(3.14* r * r)+"<br>";}}classRectangleextendsShape{area(l, b){// Overriding the method of the Shape classreturn"The area of Rectangle is "+(l * b)+"<br>";}}const circle =newCircle();// Calling area() method of Circle class
document.getElementById("output1").innerHTML = circle.area(5);const rectangle =newRectangle();// Calling area() method of Rectangle class
document.getElementById("output2").innerHTML = rectangle.area(5,10);</script></body></html></code></pre>
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.
Open Compiler
<html><body><p id ="output1"></p><p id ="output2"></p><script>classMath{mathOperations(a, b){
document.getElementById("output1").innerHTML ="Addition: "+(a+b)+"<br>";
document.getElementById("output1").innerHTML +="Subtraction: "+(a-b);}}classAdvanceMathextendsMath{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 =newAdvanceMath();
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.
