<< PREVIOUS
NEXT >>

JavaScript Class Polymorphism

About JavaScript Class Polymorphism

In JavaScript, polymorphism, a fundamental concept in object-oriented programming, allows methods in different classes to share the same name but behave differently based on the object calling them.

In JavaScript, polymorphism is achieved through method overriding and the use of inheritance.

Creating Basic Polymorphism

1. Method Overriding

Methods in parent class can be overridden in child class to implement different functionalities.

Child class creates a new implementation (functionality) of a method that is already defined in its parent class.

Simple Example of Method Overriding
Output of the above example
Animal makes a sound.
Dog barks.
Explanation of The Code
  • speak() {console.log("Animal makes a sound.");}: The speak() method is defined in the Animal class and it prints "Animal makes a sound.".
  • speak() {console.log("Dog barks.");}: The speak() method is defined in the Dog class and it prints "Dog barks.". Please note that speak() methods in parent and child classes have different functionalities (implementation).

2. Method Overloading

Method overloading refers to the multiple methods with the same name but with different type or number of parameters within a class.

JavaScript does not natively support method overloading like some other programming languages such as Java or C#. In those languages, you can define multiple methods with the same name but different parameter lists, and the correct method will be called based on the arguments passed.

However, this can be achieved in JavaScript by using techniques like parameters with default values or rest parameters or checking arguments inside the method.

Simple Example of Method Overloading
Explanation of The Code
  • add(a = 0, b = 0, c = 0){...}: The add() method is defined with 3 parameters with default values a = 0, b = 0 and c = 0.
  • multiply(a , b, c){if(c) ...}: The multiply() method is defined with 3 parameters with a condition of checking value of 'c'. If 'c' has a value, values of 'a', 'b' and 'c' arguments (parameters) will be multiplied. Otherwise, values of 'a' and 'b' arguments (parameters) will be multiplied.
  • calObj.add(5, 10): This call the add() method with two parameters.
  • calObj.add(4, 2, 3): This call the add() method with three parameters.
  • calObj.multiply(5, 6): This call the multiply() method with two parameters.
  • calObj.multiply(5, 2, 4): This call the multiply() method with three parameters.
Simple Example of Method Overloading Using Rest Parameters
Explanation of The Code
  • add(...numbers){...}: The add() method is defined with rest parameter ...numbers. This allows the method to accept an indefinite number of arguments as an array.
  • numbers.reduce((sum, num) => sum + num, 0): This is used to calculate the sum of all numbers in the array. The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in a single output value. In this case, it sums up all the numbers starting with an initial value of 0.
  • multiply(...numbers){...}: The multiply() method is defined with rest parameter ...numbers. This allows the method to accept an indefinite number of arguments as an array.
  • numbers.reduce((product, num) => product * num, 1): This is used to calculate the product of all numbers in the array. The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in a single output value. In this case, it multiplies all the numbers starting with an initial value of 1.
  • calObj.add(5, 10): This call the add() method with two parameters.
  • calObj.add(4, 2, 3): This call the add() method with three parameters.
  • calObj.multiply(5, 6): This call the multiply() method with two parameters.
  • calObj.multiply(5, 2, 4): This call the multiply() method with three parameters.

JavaScript Compiler For Live Practice

Practice the above JavaScript code in the following JavaScript Editor. Create more classes try method overriding and overloading in the following editor and click Execute button to check the output. Output will be displayed in JavaScript Code Output section.

JavaScript logo JavaScript Editor
JavaScript Code Output