Understanding JavaScript Polymorphism: Examples and Usage

Polymorphism is a powerful concept in object-oriented programming that allows objects of different classes to be treated as objects of a common superclass. In JavaScript, polymorphism is achieved through the dynamic nature of the language and its ability to use the same interface for objects of different types. In this article, we will explore JavaScript polymorphism and provide examples of its usage.

1. Polymorphic Function

In JavaScript, a function can exhibit polymorphic behavior by accepting different types of objects and performing different actions based on their types. Here's an example of a simple polymorphic function that takes different shapes and calculates their area:

<script>
class Rectangle {
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }

  area() {
    return this.width * this.height;
  }
}

class Circle {
  constructor(radius) {
    this.radius = radius;
  }

  area() {
    return Math.PI * this.radius * this.radius;
  }
}

function calculateArea(shape) {
  return shape.area();
}

const rectangle = new Rectangle(5, 10);
const circle = new Circle(7);

console.log(calculateArea(rectangle)); // Output: 50
console.log(calculateArea(circle)); // Output: ~153.94
</script>

In this example, we define two classes: Rectangle and Circle, both with an area() method. We then have a function called calculateArea() that takes a shape as an argument and calls the area() method on it. When we call calculateArea() with a Rectangle object, it calculates and returns the area of the rectangle. Similarly, when we call it with a Circle object, it calculates and returns the area of the circle. This demonstrates polymorphism, where the same function can handle different types of objects.

2. Polymorphic Method

In JavaScript, objects can also exhibit polymorphism by implementing the same method name, but with different behaviors in different classes. Here's an example:

<script>
class Animal {
  makeSound() {
    console.log("Generic animal sound");
  }
}

class Dog extends Animal {
  makeSound() {
    console.log("Woof! Woof!");
  }
}

class Cat extends Animal {
  makeSound() {
    console.log("Meow!");
  }
}

const animal = new Animal();
const dog = new Dog();
const cat = new Cat();

animal.makeSound(); // Output: "Generic animal sound"
dog.makeSound(); // Output: "Woof! Woof!"
cat.makeSound(); // Output: "Meow!"
</script>

In this example, we have an Animal class with a makeSound() method. The Dog and Cat classes extend the Animal class and override the makeSound() method with their specific sound implementations. When we call makeSound() on an instance of each class, it outputs the corresponding sound. This demonstrates polymorphism, where the same method name has different implementations in different classes.

Conclusion

JavaScript polymorphism allows for flexibility and extensibility in object-oriented programming. By leveraging the dynamic nature of JavaScript, you can write code that can handle different types of objects through a common interface. In this article, we explored the concept of polymorphism and demonstrated its usage through examples. Understanding polymorphism in JavaScript can lead to more modular and flexible code in your applications.