JavaScript Notes

Polymorphism in JavaScript – Method Overriding, Duck Typing & Many Forms

Master polymorphism in JavaScript with method overriding, duck typing, runtime polymorphism, real-world examples, common mistakes, and interview Q&A. beginner-friendly.

Polymorphism means "many forms" — the ability to call the same method on different objects and get different behavior based on the object's type. It is the fourth pillar of OOP and the key to writing clean, extensible code.

With polymorphism, you write code that works with a general type (e.g., Shape), and it automatically handles all specific types (Circle, Square, Triangle) correctly — even types added months later.

📊 Polymorphism Diagram

Example

┌────────────────────────────┐ │ Shape (Base Class) │ │ area() → 0 │ │ describe() → "I am a ... │ └───────────┬────────────────┘ │ extends ┌─────────────┼──────────────┐ ▼ ▼ ▼ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ Circle │ │ Rectangle│ │ Triangle │ │ area() │ │ area() │ │ area() │ │ πr² │ │ w × h │ │ ½ × b×h │ └──────────┘ └──────────┘ └──────────┘ ▲ ▲ ▲ │ │ │ shapes.forEach(s => console.log(s.area())) ↑ Same call — different result for each shape

💻 Example 1 — Method Overriding (Subtype Polymorphism)

Example

class Shape { constructor(color = "red") { this.color = color; } area() { return 0; // default — subclasses should override } describe() { return `A ${this.color} ${this.constructor.name} with area ${this.area().toFixed(2)}`; } } class Circle extends Shape { constructor(radius, color) { super(color); this.radius = radius; } area() { return Math.PI * this.radius ** 2; } } class Rectangle extends Shape { constructor(width, height, color) { super(color); this.width = width; this.height = height; } area() { return this.width * this.height; } } class Triangle extends Shape { constructor(base, height, color) { super(color); this.base = base; this.height = height; } area() { return 0.5 * this.base * this.height; } } // POLYMORPHISM in action — same forEach, same .area() call const shapes = [ new Circle(5, "blue"), new Rectangle(4, 6, "green"), new Triangle(8, 3, "red"), ]; shapes.forEach(shape => console.log(shape.describe())); const totalArea = shapes.reduce((sum, s) => sum + s.area(), 0); console.log(`\nTotal area: ${totalArea.toFixed(2)}`);

Output

A blue Circle with area 78.54
A green Rectangle with area 24.00
A red Triangle with area 12.00

Total area: 114.54

💻 Example 2 — Duck Typing (JavaScript's Unique Polymorphism)

JavaScript does not require a formal inheritance hierarchy for polymorphism. If an object has the right method, it works — this is called duck typing ("if it quacks like a duck, it's a duck").

Example

// No shared base class — just objects with the same interface const textLogger = { log(message) { console.log(`[TEXT] ${message}`); } }; const jsonLogger = { log(message) { console.log(`[JSON] ${JSON.stringify({ msg: message, ts: Date.now() })}`); } }; const silentLogger = { log(message) { /* intentionally silent */ } }; // This function works with ANY object that has a .log() method function processOrder(orderId, logger) { logger.log(`Processing order #${orderId}`); logger.log(`Order #${orderId} complete`); } processOrder(42, textLogger); processOrder(43, jsonLogger); processOrder(44, silentLogger); // no output — but no error either console.log("All orders processed");

Output

[TEXT] Processing order #42
[TEXT] Order #42 complete
[JSON] {"msg":"Processing order #43","ts":1749686400000}
[JSON] {"msg":"Order #43 complete","ts":1749686400001}
All orders processed

💻 Example 3 — Polymorphism with Payment Methods

Example

class Payment { constructor(amount) { this.amount = amount; } process() { throw new Error(`${this.constructor.name} must implement process()`); } receipt() { return `Receipt: ₹${this.amount} paid via ${this.constructor.name}`; } } class CreditCard extends Payment { constructor(amount, cardNumber) { super(amount); this.cardNumber = cardNumber; } process() { console.log(`💳 Charging ₹${this.amount} to card ****${this.cardNumber.slice(-4)}`); } } class UPI extends Payment { constructor(amount, upiId) { super(amount); this.upiId = upiId; } process() { console.log(`📱 Sending ₹${this.amount} via UPI to ${this.upiId}`); } } class NetBanking extends Payment { constructor(amount, bank) { super(amount); this.bank = bank; } process() { console.log(`🏦 Processing ₹${this.amount} via ${this.bank} NetBanking`); } } // Polymorphic checkout — works for any payment type function checkout(payment) { payment.process(); console.log(payment.receipt()); console.log("---"); } const payments = [ new CreditCard(1500, "1234567890123456"), new UPI(800, "student@upi"), new NetBanking(3000, "HDFC"), ]; payments.forEach(checkout);

Output

💳 Charging ₹1500 to card ****3456
Receipt: ₹1500 paid via CreditCard
---
📱 Sending ₹800 via UPI to student@upi
Receipt: ₹800 paid via UPI
---
🏦 Processing ₹3000 via HDFC NetBanking
Receipt: ₹3000 paid via NetBanking
---

📋 Types of Polymorphism in JavaScript

Type	How it works in JS	Example
Subtype / Runtime	Method overriding via `extends`	`shape.area()` calls Circle or Rectangle's version
Duck Typing	Any object with the right method works	Any object with `.log()` works as a logger
Ad-hoc (overloading)	Simulate with default params / conditionals	`add(a, b, c = 0)` works for 2 or 3 args
Parametric	Generic code via iteration	`shapes.forEach(s => s.area())`

⚠️ Common Mistakes

❌ Mistake 1 — Not Overriding the Method in the Subclass

js example

class Animal { speak() { return "some sound"; } }
class Dog extends Animal { }   // forgot to override speak()

const dog = new Dog();
console.log(dog.speak());   // "some sound" — not dog-specific

Output

some sound

❌ Mistake 2 — Checking Type Instead of Using Polymorphism

js example

// BAD — type-checking breaks the open/closed principle
function processShape(shape) {
  if (shape instanceof Circle)    return Math.PI * shape.radius ** 2;
  if (shape instanceof Rectangle) return shape.width * shape.height;
  // Need to add a new if for every new shape!
}

// GOOD — polymorphic call works for any shape, now and future
function processShape(shape) { return shape.area(); }

❌ Mistake 3 — Calling a Method That Doesn't Exist on All Types

Example

const items = [new Circle(5), new Rectangle(4, 6), { color: "red" }]; items.forEach(item => console.log(item.area())); // TypeError for plain object

Output

78.54
24
TypeError: item.area is not a function

🎯 Key Takeaways

Polymorphism = same interface, different behavior depending on the object's type
Method overriding (extends + same method name) is the classic polymorphism pattern
Duck typing in JavaScript means any object with the right method works — no class hierarchy needed
Polymorphism enables the Open/Closed Principle: add new types without changing existing code
Prefer polymorphism over if/else instanceof chains — it's cleaner and more extensible
Use super.method() to extend parent behavior rather than completely replacing it

❓ Interview Questions

Q1. What is polymorphism in JavaScript? > Polymorphism means "many forms." The same method name can produce different behavior depending on the object it is called on. In JavaScript, this is achieved through method overriding in subclasses and duck typing.

Q2. What is the difference between method overloading and method overriding? > Method overriding: a subclass redefines an inherited method with the same name. JavaScript supports this via extends. Method overloading (multiple methods with the same name but different parameters) is not natively supported in JavaScript — you simulate it with default parameters or arguments checking.

Q3. What is duck typing? > Duck typing means JavaScript doesn't require a formal class hierarchy for polymorphism. If an object has the method you're trying to call, it works — regardless of its class. "If it walks like a duck and quacks like a duck, it's a duck."

Q4. How does polymorphism follow the Open/Closed Principle? > The Open/Closed Principle states: code should be open for extension but closed for modification. With polymorphism, you can add a new Triangle class with its own area() without changing any code that calls shape.area(). The existing code just works.

Q5. What happens if a subclass does not override the parent method? > The parent's version of the method is called. This is valid — not all subclasses need to override. Override only when the child needs different behavior. If you want to enforce overriding, throw an error in the base class: throw new Error("Must implement method()").

Q6. Can you have polymorphism without inheritance in JavaScript? > Yes — through duck typing. Multiple unrelated objects can each implement a .draw() method and be used interchangeably. No shared class or interface needed. This is one of JavaScript's strengths over strictly typed languages.

Q7. What is runtime polymorphism? > Runtime polymorphism (also called dynamic dispatch) means the correct method to call is determined at runtime, not compile time. When you call shape.area() where shape could be a Circle or Rectangle, JavaScript decides which area() to call based on the actual object type at that moment.

Q8. How is constructor.name useful in polymorphism? > this.constructor.name returns the name of the class that created the object. In a base class method like describe(), using this.constructor.name dynamically picks up the subclass name, enabling the base class to display accurate type information without knowing the specific subclass.

Exam Focus

Revise definitions, diagrams, examples, and short-answer points for Polymorphism in JavaScript – Method Overriding, Duck Typing & Many Forms.

Interview Use

Prepare one clear explanation, one practical example, and one common mistake for this JavaScript Master Course topic.

Search Terms

javascript-complete-guide, javascript master course, javascript, complete, guide, oop, polymorphism, polymorphism in javascript – method overriding, duck typing & many forms

Continue learning this concept

Oop In JavascriptAbstraction in JavaScript OOP – Hide Complexity, Expose SimplicityLearn abstraction in JavaScript OOP with class examples, private fields, real-world analogies, common mistakes, and interview Q&A. beginner-friendly tutorial.Oop In JavascriptJavaScript Classes Tutorial – ES6 Class Syntax, Inheritance & MoreMaster JavaScript ES6 classes with constructors, methods, static members, inheritance, private fields, and real-world examples. beginner-friendly JS OOP tutorial.Oop In JavascriptJavaScript Constructor Functions – new Keyword, Prototype & OOP PatternsUnderstand JavaScript constructor functions with the new keyword, prototype methods, object creation, comparison with ES6 classes, and interview-ready Q&A.Oop In JavascriptEncapsulation in JavaScript – Private Fields, Getters, Setters & Data ProtectionLearn encapsulation in JavaScript with private class fields, getters, setters, closures, and real-world examples. Protect your data with ES2022 OOP techniques.Oop In JavascriptJavaScript Inheritance – extends, super, and Prototype-Based InheritanceMaster JavaScript inheritance with ES6 extends, super keyword, method overriding, prototype chain, multi-level inheritance, and interview-ready Q&A examples.Oop In JavascriptObject-Oriented Programming in JavaScript – OOP Concepts Complete GuideComplete guide to OOP in JavaScript: classes, objects, the 4 pillars (encapsulation, inheritance, abstraction, polymorphism), prototype chain, and interview Q&A.

PreviousJavaScript OOP Projects – Build Real-World Apps with Classes & OOP NextJavaScript Prototype Chain – How Property Lookup Works in JavaScript