Polymorphism in Javascript
Tags: javascript, programming, tutorial, learning
Published: 2024-03-23 01:36:31

# Summary:

Polymorphism is a fundamental concept in object-oriented programming (OOP) languages, where "poly" refers to many and "morph" signifies transforming one form into another. In the context of programming, polymorphism enables the same function to be called with different signatures, allowing for flexibility and adaptability in code design.

## Understanding Polymorphism:

In real-life scenarios, individuals often exhibit polymorphic behavior. For instance, consider a boy who can simultaneously act as a student, a class monitor, or even a team captain. Each role necessitates different actions and responsibilities, showcasing the versatility and adaptability inherent in polymorphism.

Similarly, a girl can seamlessly move between different roles such as a student, an employee, and a citizen. Depending on the context, she performs different tasks and fulfills distinct responsibilities, demonstrating the essence of polymorphism being capable of assuming diverse forms and functionalities based on the prevailing circumstances.

Polymorphism empowers developers to design software systems that are resilient, extensible, and capable of accommodating evolving requirements. By leveraging polymorphic principles, programmers can create code that efficiently adapts to changing contexts, thereby enhancing the robustness and flexibility of their applications.

> In JavaScript, polymorphism is achieved through prototype inheritance and method overloading.

## Features of Polymorphism

Polymorphism, a cornerstone of object-oriented programming (OOP), enables a single function or method to exhibit different behaviors based on the context in which it is invoked. Let's explore the features of polymorphism with a clearer and more understandable example.

### Example: Animal Sounds

Consider a scenario where we have different types of animals, each capable of making a distinct sound. We'll create a base class `Animal` with a method `makeSound()`, and then we'll create subclasses for specific types of animals, each overriding the `makeSound()` method to produce the unique sound of that animal.

```javascript
// Base class representing an Animal
class Animal {
  makeSound() {
    console.log("Some generic animal sound");
  }
}

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

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

// Subclass for Cows
class Cow extends Animal {
  makeSound() {
    console.log("Moo! Moo!");
  }
}

// Create instances of different animals
const dog = new Dog();
const cat = new Cat();
const cow = new Cow();

// Invoke the makeSound() method on each animal
dog.makeSound(); // Outputs: Woof! Woof!
cat.makeSound(); // Outputs: Meow! Meow!
cow.makeSound(); // Outputs: Moo! Moo!
```

### Explanation:

In this example, we have a base class `Animal` with a generic `makeSound()` method. Subclasses such as `Dog`, `Cat`, and `Cow` extend the `Animal` class and override the `makeSound()` method with their specific sound implementations.

- **Polymorphic Behavior:** Despite invoking the same method `makeSound()`, each object (`dog`, `cat`, `cow`) exhibits different behavior based on its type. This is polymorphism in action, where the method behaves differently depending on the object's actual class.

- **Flexibility and Extensibility:** With polymorphism, we can seamlessly add new types of animals (subclasses) without modifying the existing code. Each new subclass can define its own behavior for the `makeSound()` method, enhancing the flexibility and extensibility of our system.

- **Code Reusability:** By defining a common interface (`makeSound()` method) in the base class `Animal`, we promote code reuse across different subclasses. This reduces redundancy and promotes a modular and maintainable codebase.

In essence, polymorphism allows us to write code that is adaptable, reusable, and easily extensible, making it a powerful tool in object-oriented programming.

## Types of Polymorphism in JavaScript

JavaScript, being a versatile language, supports different types of polymorphism, each offering unique benefits and use cases.

### 1. Ad-hoc Polymorphism:

Ad-hoc polymorphism allows functions to behave differently based on the types or number of arguments passed to them. It is often implemented through method overloading or conditional logic within functions.

#### Example:

Consider a function `calculateArea()` that calculates the area of different shapes based on the number of arguments provided. If two arguments are passed, it calculates the area of a rectangle. If only one argument is passed, it calculates the area of a circle.

```javascript
function calculateArea(shape, arg1, arg2) {
  if (shape === "rectangle") {
    return arg1 * arg2;
  } else if (shape === "circle") {
    return Math.PI * Math.pow(arg1, 2);
  } else {
    throw new Error("Unsupported shape");
  }
}

console.log(calculateArea("rectangle", 5, 3)); // Outputs: 15 (Area of rectangle)
console.log(calculateArea("circle", 4)); // Outputs: 50.26548245743669 (Area of circle)
```

In this example:

- The `calculateArea()` function behaves differently based on the value of the `shape` parameter.
- If `shape` is `'rectangle'`, the function calculates the area of a rectangle using two arguments (`arg1` and `arg2`).
- If `shape` is `'circle'`, the function calculates the area of a circle using one argument (`arg1`).

#### Advantages:

- **Simplicity:** Provides a straightforward way to define multiple behaviors within a single function based on input parameters.
- **Flexibility:** Allows for versatile function usage with different argument combinations, enhancing code adaptability.
- **Readability:** Promotes code readability by encapsulating conditional logic within the function, making it easier to understand and maintain.

### 2. Parametric Polymorphism:

Parametric polymorphism, also known as generic programming, allows functions and classes to operate on values of unspecified types. It is enabled by using type parameters that can be instantiated with various concrete types.

#### Example:

```javascript
// Generic function to return the length of an array or string
function getLength(input) {
  return input.length;
}

console.log(getLength([1, 2, 3])); // Outputs: 3
console.log(getLength("Hello")); // Outputs: 5
```

#### Advantages:

- **Reusability:** Promotes code reuse by allowing the creation of generic functions and classes that can operate on multiple data types.
- **Type Safety:** Enhances type safety by specifying constraints on type parameters, reducing the risk of runtime errors.
- **Abstraction:** Encourages abstraction by separating algorithmic logic from specific data types, leading to cleaner and more modular code.

### 3. Subtype Polymorphism:

Subtype polymorphism allows objects of different classes to be treated as objects of a common superclass. It is implemented through inheritance and method overriding, where subclasses provide specific implementations for inherited methods.

#### Example:

```javascript
// Base class representing a Shape
class Shape {
  draw() {
    console.log("Drawing a shape");
  }
}

// Subclass representing a Circle
class Circle extends Shape {
  draw() {
    console.log("Drawing a circle");
  }
}

// Subclass representing a Square
class Square extends Shape {
  draw() {
    console.log("Drawing a square");
  }
}

// Polymorphic behavior
const circle = new Circle();
const square = new Square();

circle.draw(); // Outputs: Drawing a circle
square.draw(); // Outputs: Drawing a square
```

#### Advantages:

- **Flexibility:** Allows for the creation of a unified interface for diverse objects, enabling seamless interchangeability and flexibility in code design.
- **Extensibility:** Facilitates easy extension of functionality by adding new subclasses with specialized implementations while maintaining compatibility with existing code.
- **Polymorphic Dispatch:** Enables polymorphic dispatch, where the correct method implementation is dynamically chosen at runtime based on the object's actual type, enhancing runtime flexibility and adaptability.



### Dynamic Polymorphism:

#### Explanation:

Dynamic polymorphism refers to the ability of an object to decide at runtime which method implementation to invoke based on its actual type. This is achieved through method overriding in subclass implementations.

#### Example:

Consider a scenario where we have a base class `Shape` with a method `draw()`, and subclasses `Circle` and `Square` that override the `draw()` method to provide specific implementations. At runtime, the correct `draw()` method is dynamically chosen based on the type of shape being drawn.

```javascript
// Base class representing a Shape
class Shape {
  draw() {
    console.log("Drawing a shape");
  }
}

// Subclass representing a Circle
class Circle extends Shape {
  draw() {
    console.log("Drawing a circle");
  }
}

// Subclass representing a Square
class Square extends Shape {
  draw() {
    console.log("Drawing a square");
  }
}

// Dynamic polymorphic behavior
const shapes = [new Circle(), new Square()];

shapes.forEach((shape) => {
  shape.draw(); // Outputs: Drawing a circle, Drawing a square
});
```

#### Advantages:

- **Flexibility:** Allows for runtime determination of method implementation, enabling adaptable behavior based on object types.
- **Extensibility:** Facilitates adding new subclasses with specialized behavior without modifying existing code, enhancing code maintainability and scalability.
- **Dynamic Dispatch:** Enables polymorphic dispatch, where the appropriate method implementation is selected dynamically at runtime, promoting runtime flexibility and adaptability.

### Multiple Inheritance:

#### Explanation:

Multiple inheritance allows a class to inherit properties and behaviors from more than one superclass. While JavaScript does not support multiple inheritance in the traditional sense, it can be simulated using mixins or object composition techniques.

#### Example:

Consider a scenario where a class `StudentAthlete` inherits from both `Student` and `Athlete` classes, thereby inheriting attributes and methods related to academic performance as well as athletic abilities.

```javascript
// Mixin for Student-related functionalities
const StudentMixin = {
  study() {
    console.log("Studying...");
  },
};

// Mixin for Athlete-related functionalities
const AthleteMixin = {
  exercise() {
    console.log("Exercising...");
  },
};

// Class representing a Student Athlete
class StudentAthlete {
  constructor(name) {
    this.name = name;
  }
}

// Object composition to simulate multiple inheritance
Object.assign(StudentAthlete.prototype, StudentMixin, AthleteMixin);

const studentAthlete = new StudentAthlete("Mahdi");

studentAthlete.study(); // Outputs: Studying...
studentAthlete.exercise(); // Outputs: Exercising...
```

#### Advantages:

- **Enhanced Flexibility:** Allows for the creation of complex class hierarchies and facilitates code reuse by inheriting features from multiple parent classes.
- **Selective Inheritance:** Enables selective inheritance of specific functionalities from different parent classes, promoting fine-grained control over class behavior.
- **Composition over Inheritance:** Favors composition over traditional inheritance, promoting code modularity and reducing the complexity associated with deep class hierarchies.

### Polymorphism in Functional Programming:

#### Explanation:

While polymorphism is commonly associated with object-oriented programming, it also exists in functional programming paradigms. In functional programming languages like JavaScript, polymorphism can be achieved through higher-order functions, function composition, and parametric polymorphism.

#### Example:

In functional programming, a higher-order function that takes other functions as arguments exhibits polymorphic behavior by accepting functions with different signatures.

```javascript
// Higher-order function to perform an operation on two numbers
function operate(num1, num2, operation) {
  return operation(num1, num2);
}

// Functions representing different operations
function add(a, b) {
  return a + b;
}

function multiply(a, b) {
  return a * b;
}

console.log(operate(3, 4, add)); // Outputs: 7
console.log(operate(3, 4, multiply)); // Outputs: 12
```

#### Advantages:

- **Modularity:** Polymorphism in functional programming promotes code modularity by separating concerns and encapsulating reusable behavior within functions.
- **Expressiveness:** Enables the creation of concise and expressive programs by abstracting common patterns into higher-order functions and function compositions.
- **Functional Composition:** Facilitates function composition, where smaller, reusable functions are combined to create more complex behaviors, promoting code reuse and readability.



### Design Patterns Leveraging Polymorphism

Design patterns are reusable solutions to common problems encountered during software design and development. Polymorphism plays a crucial role in many design patterns, enabling flexible and extensible software designs. Let's explore some common design patterns that leverage polymorphism:

#### 1. Strategy Pattern

The Strategy Pattern defines a family of algorithms, encapsulates each one, and makes them interchangeable. It allows the algorithm to vary independently from clients that use it.

##### Example:

```javascript
// Strategy Interface
class PaymentStrategy {
  pay(amount) {}
}

// Concrete Strategies
class CreditCardPayment extends PaymentStrategy {
  pay(amount) {
    console.log(`Paid $${amount} using Credit Card`);
  }
}

class PayPalPayment extends PaymentStrategy {
  pay(amount) {
    console.log(`Paid $${amount} using PayPal`);
  }
}

// Context
class ShoppingCart {
  constructor(paymentStrategy) {
    this._paymentStrategy = paymentStrategy;
  }

  checkout(amount) {
    this._paymentStrategy.pay(amount);
  }
}

// Usage
const cart = new ShoppingCart(new CreditCardPayment());
cart.checkout(100); // Outputs: Paid $100 using Credit Card

cart._paymentStrategy = new PayPalPayment();
cart.checkout(200); // Outputs: Paid $200 using PayPal
```

In this example, the `ShoppingCart` class utilizes a payment strategy that can be dynamically set to either `CreditCardPayment` or `PayPalPayment`, demonstrating how polymorphism allows interchangeable behavior at runtime.

#### 2. Template Method Pattern

The Template Method Pattern defines the skeleton of an algorithm in the superclass but lets subclasses override specific steps of the algorithm without changing its structure.

##### Example:

```javascript
// Abstract Class defining Template Method
class Meal {
  prepare() {
    this.prepareIngredients();
    this.cook();
    this.serve();
  }

  // Abstract methods to be implemented by subclasses
  prepareIngredients() {}
  cook() {}
  serve() {}
}

// Concrete Subclass
class Pizza extends Meal {
  prepareIngredients() {
    console.log("Prepare pizza ingredients");
  }

  cook() {
    console.log("Cook pizza in oven");
  }

  serve() {
    console.log("Serve pizza hot");
  }
}

// Concrete Subclass
class Pasta extends Meal {
  prepareIngredients() {
    console.log("Prepare pasta ingredients");
  }

  cook() {
    console.log("Boil pasta in water");
  }

  serve() {
    console.log("Serve pasta with sauce");
  }
}

// Usage
const pizza = new Pizza();
pizza.prepare();
// Outputs:
// Prepare pizza ingredients
// Cook pizza in oven
// Serve pizza hot

const pasta = new Pasta();
pasta.prepare();
// Outputs:
// Prepare pasta ingredients
// Boil pasta in water
// Serve pasta with sauce
```

Here, the `Meal` class defines a template method `prepare()` that orchestrates the preparation, cooking, and serving of a meal. Subclasses such as `Pizza` and `Pasta` provide specific implementations for each step, demonstrating how polymorphism allows customization of behavior while maintaining the overall algorithm structure.

#### 3. Visitor Pattern

The Visitor Pattern represents an operation to be performed on the elements of an object structure. It allows adding new operations without modifying the classes of the elements.

##### Example:

```javascript
// Visitor Interface
class Visitor {
  visit(element) {}
}

// Concrete Visitor
class TaxVisitor extends Visitor {
  visit(element) {
    if (element instanceof Liquor) {
      return element.price * 0.18; // Liquor tax rate: 18%
    } else if (element instanceof Tobacco) {
      return element.price * 0.25; // Tobacco tax rate: 25%
    } else if (element instanceof Necessity) {
      return element.price * 0.05; // Necessity tax rate: 5%
    }
  }
}

// Visitable Interface
class Visitable {
  accept(visitor) {}
}

// Concrete Visitable Elements
class Liquor extends Visitable {
  constructor(price) {
    super();
    this.price = price;
  }

  accept(visitor) {
    return visitor.visit(this);
  }
}

class Tobacco extends Visitable {
  constructor(price) {
    super();
    this.price = price;
  }

  accept(visitor) {
    return visitor.visit(this);
  }
}

class Necessity extends Visitable {
  constructor(price) {
    super();
    this.price = price;
  }

  accept(visitor) {
    return visitor.visit(this);
  }
}

// Usage
const items = [new Liquor(20), new Tobacco(30), new Necessity(50)];
const visitor = new TaxVisitor();

const totalTaxes = items.reduce((acc, item) => acc + item.accept(visitor), 0);
console.log(`Total Taxes: $${totalTaxes.toFixed(2)}`);
```

In this example, the Visitor Pattern is used to calculate taxes for different types of items without modifying the item classes. The `TaxVisitor` class defines specific tax calculations for each item type, demonstrating how polymorphism allows adding new operations without altering existing class structures.

These design patterns showcase how polymorphism enables flexible and extensible software designs by allowing interchangeable behaviors, customized algorithm steps, and dynamic operations on object structures.

# Conclusion:

Polymorphism, a fundamental concept in object-oriented programming (OOP), empowers developers to create flexible, extensible, and adaptable software systems. By allowing objects to exhibit multiple forms and behaviors based on their context, polymorphism promotes code reuse, modularity, and maintainability, thereby enhancing the overall quality of software designs.

Through various forms such as ad-hoc polymorphism, parametric polymorphism, subtype polymorphism, and dynamic polymorphism, developers can leverage polymorphic principles to achieve diverse functionalities and address a wide range of programming challenges. Additionally, polymorphism extends beyond traditional OOP paradigms and finds application in functional programming, where higher-order functions, function composition, and type inference facilitate polymorphic behavior.

Design patterns such as the Strategy Pattern, Template Method Pattern, and Visitor Pattern exemplify how polymorphism can be effectively utilized to create robust, scalable, and maintainable software architectures. These patterns demonstrate the practical application of polymorphism in solving common design problems, such as algorithm variability, code reuse, and dynamic behavior customization.

In JavaScript, polymorphism is achieved through various mechanisms, including prototype inheritance, method overriding, higher-order functions, and object composition. By understanding and leveraging these techniques, JavaScript developers can design elegant and efficient solutions that leverage the power of polymorphism to meet the evolving needs of modern software development.

Ultimately, polymorphism serves as a cornerstone of software design, empowering developers to build resilient, adaptable, and future-proof applications that can seamlessly evolve and scale with changing requirements and technological advancements.