Teachnique
      CourseRoadmaps
      Login

      OverviewPlacementSyntaxHello WorldConsole.log()CommentsVariableslet StatementConstantsData TypesType ConversionsStrict ModeReserved Keywords

      OperatorsArithmetic OperatorsComparison OperatorsLogical OperatorsBitwise OperatorsAssignment OperatorsConditional Operatorstypeof OperatorNullish Coalescing OperatorDelete OperatorComma OperatorGrouping OperatorYield OperatorSpread OperatorExponentiation OperatorOperator Precedence

      If...ElseWhile LoopsFor LoopFor...in LoopFor...of LoopLoop ControlBreak StatementContinue StatementSwitch CaseUser Defined Iterators

      FunctionsFunction ExpressionsFunction ParametersDefault ParametersFunction() ConstructorFunction HoistingArrow FunctionsFunction InvocationFunction call() MethodFunction apply() MethodFunction bind() MethodClosuresVariable ScopeGlobal VariablesSmart Function Parameters

      NumberBooleanStringsArraysDateMathRegExpSymbolSetsWeakSetMapsWeakMapIterablesReflectTypedArrayTempate LiteralsTagged Templates

      Objects OverviewClassesObject PropertiesObject MethodsStatic MethodsDisplay ObjectsObject AccessorsObject ConstructorsNative PrototypesES5 Object MethodsEncapsulationInheritanceAbstractionPolymorphismDestructuring AssignmentObject DestructuringArray DestructuringNested DestructuringOptional ChainingGlobal ObjectMixinsProxies

      HistoryVersionsES5ES6ECMAScript 2016ECMAScript 2017ECMAScript 2018ECMAScript 2019ECMAScript 2020ECMAScript 2021ECMAScript 2022

      CookiesCookie AttributesDeleting Cookies

      Browser Object ModelWindow ObjectDocument ObjectScreen ObjectHistory ObjectNavigator ObjectLocation ObjectConsole Object

      Web APIHistory APIStorage APIForms APIWorker APIFetch APIGeolocation API

      EventsDOM Events

      Feedback

      Submit request if you have any questions.

      Course
      Polymorphism

      JavaScript Tutorial

      This JavaScript tutorial is crafted for beginners to introduce them to the basics and advanced concepts of JavaScript. By the end of this guide, you'll reach a proficiency level that sets the stage for further growth. Aimed at empowering you to progress towards becoming a world-class software developer, this tutorial paves the way for a successful career in web development and beyond.

      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.