Greetings! In today's lesson, we'll unravel the concept of polymorphism in JavaScript's Object-Oriented Programming (OOP). Grasping polymorphism enables us to use a single entity (a method, class, or interface) to represent different types in various scenarios. Let's proceed.

Polymorphism, a pillar of OOP, allows one object to embody multiple forms. Visualize a button in software; depending on its type (for instance, a submit button or a radio button), the action resulting from pressing it varies. This dynamic encapsulates the spirit of polymorphism!

Let's observe polymorphism in action within a simple application involving shapes. The base Shape class has an area method, which calculates the area for shapes. This method is uniquely implemented in the subclasses Rectangle and Circle.

JavaScript
Copy to clipboard
1class Shape {
2    area() {
3        throw new Error("This method should be overridden.");
4    }
5}
6
7class Rectangle extends Shape {
8    constructor(length, width) {
9        super();
10        this.length = length;
11        this.width = width;
12    }
13
14    area() {  // calculate rectangle area
15        return this.length * this.width;
16    }
17}
18
19class Circle extends Shape {
20    constructor(radius) {
21        super();
22        this.radius = radius;
23    }
24
25    area() {  // calculate circle area
26        return 3.14 * this.radius * this.radius;
27    }
28}
29
30const rectangle = new Rectangle(2, 3);
31console.log(rectangle.area()); // Prints: 6
32
33const circle = new Circle(5);
34console.log(circle.area()); // Prints: 78.5

Here, polymorphism shines as the area function takes on multiple forms and behaves differently depending on whether it's part of a Rectangle or a Circle.

Polymorphism is indispensable when dealing with inheritance, as a single action can exhibit different behaviors for different object types, streamlining the code while enhancing readability and maintainability.

JavaScript supports dynamic polymorphism through method overriding within subclasses. Unlike some other programming languages, JavaScript doesn't support static polymorphism (method overloading) in the traditional sense. However, we can achieve similar results using default parameters and type checking.

Below is an illustrative example of dynamic polymorphism using method overriding.

JavaScript
Copy to clipboard
1class Shape {
2    area(length, width, radius) {
3        if (radius) {  // If the radius is provided, calculate the circle area
4            return 3.14 * radius * radius;
5        } else if (length && width) {  // if length and width are provided, calculate the rectangle area
6            return length * width;
7        } else {
8            return "Invalid parameters";
9        }
10    }
11}
12
13const shape = new Shape();
14console.log(shape.area(5, 2));  // Rectangle area
15console.log(shape.area(null, null, 3));  // Circle area

Great job! We've now learned about polymorphism, observed its implementation, and discovered its applications. Now, prepare for hands-on practice tasks. Apply what you've learned and excel in JavaScript programming. Happy coding!