Polymorphism in JavaScript

Polymorphism is one of the 4 pillars of object-oriented programming languages where poly means many and morphism means transforming one form into another. Polymorphism means the same function with different signatures is called many times. It allows methods to do different things based on the object it is acting upon.

In JavaScript, polymorphism works in two primary ways:

• Method Overriding: A child class overrides a method of its parent class.
• Method Overloading (simulated): A function behaves differently based on the number or type of its arguments.

Method Overriding

Method overriding occurs when a subclass provides its own specific implementation of a method that is already defined in its parent class. When you call this method, JavaScript will use the subclass's implementation instead of the parent's, which is a runtime decision.

class Animal {
    speak() {
        console.log("Animal makes a sound");
    }
}

class Dog extends Animal {
    speak() {
        console.log("Dog barks");
    }
}

class Cat extends Animal {
    speak() {
        console.log("Cat meows");
    }
}

const dog = new Dog();
dog.speak(); 

const cat = new Cat();
cat.speak();  

Dog barks
Cat meows

In this example

• Dog and Cat override the speak() method defined in the Animal class.
• Even though all of them are instances of Animal, each class provides its own behavior for the speak() method.
• This is an example of runtime polymorphism because JavaScript determines at runtime which method to call based on the object's type.

Method Overloading (Compile-time Polymorphism)

JavaScript does not natively support method overloading, where multiple methods with the same name but different arguments exist in the same scope. However, method overloading can be simulated by checking the number or type of arguments passed to a function, and executing different logic based on them.

class Calculator {
    add(a, b) {
        if (b === undefined) {
            return a + a; 
        }
        return a + b; 
    }
}

const calc = new Calculator();
console.log(calc.add(2)); 
console.log(calc.add(2, 3));

4
5

In this example

• The add() method behaves differently based on the number of arguments provided.
• If only one argument is passed, it doubles the value; if two arguments are passed, it adds them.

Note- While JavaScript doesn’t natively support method overloading with function signatures (as in Java or C++), we can still achieve similar functionality through manual argument checking.

Polymorphism with Functions and Objects

It is also possible in JavaScript that we can make functions and objects with polymorphism.

class A {
    area(x, y) {
        console.log(x * y);
    }
}
class B extends A {
    area(a, b) {
        super.area(a, b);
        console.log('Class B')
    }
}

let ob = new B();
let output = ob.area(100, 200);

Use Cases of Polymorphism

• UI Components: Different types of UI elements like buttons, text fields, and checkboxes can have unique behaviors but have common interfaces.
• Database Operations: Methods for different database types can share a common interface while implementing specific logic.
• File Handling: Implementing the different behaviors but using the same method for reading, writing, and parsing different file formats.
• API Responses: Function can be used for handling the different types of API responses.

Suggested Quiz

Edit Quiz

5 Questions

What is polymorphism in JavaScript?

• A

  Creating multiple classes at once
  

• B

  One function behaving differently based on the object or arguments

• C

  Converting objects into arrays

• D

  A method that cannot be overridden

Explanation:

Polymorphism allows the same function/method to behave differently depending on context — object type or arguments.

What is the technique when a child class provides its own implementation of a parent method?

• A

  Method Skipping
  

• B

  Method Encapsulation

• C

  Method Overriding

• D

  Method Overloading

Explanation:

Method overriding is runtime polymorphism where a subclass redefines a parent class method.

JavaScript does not support true method overloading, but it can be simulated using:

• A

  Multiple function names
  

• B

  Checking argument count or types inside a function

• C

  Using super() only

• D

  Using prototypes only

Explanation:

JavaScript simulates method overloading by checking parameters at runtime and acting accordingly.

What is the output of following code?

class Animal { speak(){ console.log("Animal sound") } }

class Dog extends Animal { speak(){ console.log("Dog barks") } }

let d = new Dog();

d.speak();

• A

  Animal sound
  

• B

  Dog barks

• C

  Error: speak() not found

• D

  Undefined

Explanation:

Dog overrides speak(), so polymorphism executes Dog's version instead of Animal's.

In the calculator example, what will calc.add(4) output?

class Calculator{

add(a,b){

if(b===undefined) return a+a;

return a+b;

}

}

• A

  4

• B

  8

• C

  0

• D

  Error

Explanation:

Passing one argument triggers the condition, doubling it → 4 + 4 = 8.

Quiz Completed Successfully

Your Score :   2/5

Accuracy :  0%

Login to View Explanation

1/5 1/5 < Previous Next >