You have probably seen threads where someone asks how to design flexible JavaScript APIs that work with multiple object types without a forest of if statements. That topic usually lands on one core concept from object oriented programming and functional design: polymorphism.<\/p>\n\n\n\n
Hi folks,<\/em><\/p>\n\n\n\n I keep hearing about polymorphism in JavaScript, especially in relation to classes and \u201cduck typing.\u201d I use JS daily but I am not sure I can explain it clearly or choose the right pattern when building APIs.<\/em><\/p>\n\n\n\n What is polymorphism in JavaScript? How does it work with classes and prototypes, what are practical patterns to emulate function overloading, and what are good examples or pitfalls to watch for?<\/em><\/p>\n\n\n\n Thanks!<\/em><\/p>\n\n\n\n Polymorphism means \u201cmany forms.\u201d In code, it\u2019s one of the four pillars of object-oriented programming. It lets you write one interface and swap in different implementations without changing the calling code.<\/p>\n\n\n\n JavaScript supports polymorphism through class inheritance, prototypal objects, and dynamic typing. The result is more extensible code and fewer conditionals scattered across your app. Let\u2019s break it down:<\/p>\n\n\n\n With classes, you define a common contract and let subclasses provide their own behavior. Callers depend on the contract, not the concrete type.<\/p>\n\n\n In JavaScript, you do not need a class hierarchy. If an object has the right methods, treat it as compatible. This is duck typing: \u201cif it quacks like a duck\u2026\u201d<\/p>\n\n\n JavaScript does not have traditional overloading, but you can branch on argument types or use an options object. Keep branches small and validated.<\/p>\n\n\n The Strategy pattern is a practical use of polymorphism. Define a shared interface, then swap strategies at runtime without changing callers.<\/p>\n\n\n If you manage media, a polymorphic design lets you swap processing backends. In the example above, the CloudThumbnailer returns an image URL that includes on-the-fly transformations. Since a Cloudinary URL is just an image URL<\/a>, the rest of your app can treat it like any other source. You can decide at runtime which strategy to use based on deployment or content type, while still keeping a single interface.<\/p>\n\n\n\nAnswer:<\/h2>\n\n\n\n
1. Class-Based Polymorphism (Subtype Polymorphism)<\/h3>\n\n\n\n
class<\/span> Shape<\/span> <\/span>{\n\u00a0 area() { throw<\/span> new<\/span> Error<\/span>(\"Implement in subclass\"<\/span>); }\n}\n\nclass<\/span> Rectangle<\/span> extends<\/span> Shape<\/span> <\/span>{\n\u00a0 constructor<\/span>(w, h) { super<\/span>(); this<\/span>.w = w; this<\/span>.h = h; }\n\u00a0 area() { return<\/span> this<\/span>.w * this<\/span>.h; }\n}\n\nclass<\/span> Circle<\/span> extends<\/span> Shape<\/span> <\/span>{\n\u00a0 constructor<\/span>(r) { super<\/span>(); this<\/span>.r = r; }\n\u00a0 area() { return<\/span> Math<\/span>.PI * this<\/span>.r * this<\/span>.r; }\n}\n\nfunction<\/span> printArea<\/span>(shape<\/span>) <\/span>{\n\u00a0 \/\/ Works with any object that honors the Shape interface<\/span>\n\u00a0 console<\/span>.log(shape.area().toFixed(2<\/span>));\n}\n\n[ new<\/span> Rectangle(3<\/span>, 4<\/span>), new<\/span> Circle(2<\/span>) ].forEach(printArea);<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n2. Duck Typing and Prototypes<\/h3>\n\n\n\n
const<\/span> sendPing = (target<\/span>) =><\/span> {\n\u00a0 if<\/span> (target && typeof<\/span> target.send === \"function\"<\/span>) {\n\u00a0 \u00a0 return<\/span> target.send(\"ping\"<\/span>);\n\u00a0 }\n\u00a0 throw<\/span> new<\/span> TypeError<\/span>(\"Object must implement send(msg)\"<\/span>);\n};\n\nconst<\/span> WebSocketClient = { send<\/span>: (msg<\/span>) =><\/span> console<\/span>.log(\"ws:\"<\/span>, msg) };\nconst<\/span> MockClient = { send<\/span>: (msg<\/span>) =><\/span> console<\/span>.log(\"mock:\"<\/span>, msg) };\n\n[WebSocketClient, MockClient].forEach(sendPing);<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n3) Function ‘Overloading’ Patterns in JS<\/h3>\n\n\n\n
\/\/ One function, multiple input shapes<\/span>\nfunction<\/span> read<\/span>(input<\/span>) <\/span>{\n\u00a0 if<\/span> (typeof<\/span> input === \"string\"<\/span>) {\n\u00a0 \u00a0 return<\/span> fetch(input).then(r<\/span> =><\/span> r.text());\n\u00a0 }\n\u00a0 if<\/span> (input instanceof<\/span> Blob) {\n\u00a0 \u00a0 return<\/span> input.text();\n\u00a0 }\n\u00a0 throw<\/span> new<\/span> TypeError<\/span>(\"read accepts a URL string or a Blob\"<\/span>);\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n\n
4. Strategy Pattern: Plug Different Behaviors Behind 1 Interface<\/h3>\n\n\n\n
class<\/span> Thumbnailer<\/span> <\/span>{\n\u00a0 make(\/* asset *\/<\/span>) { throw<\/span> new<\/span> Error<\/span>(\"Implement in subclass\"<\/span>); }\n}\n\nclass<\/span> LocalThumbnailer<\/span> extends<\/span> Thumbnailer<\/span> <\/span>{\n\u00a0 make(asset) { return<\/span> `file:\/\/${asset.path}<\/span>`<\/span>; }\n}\n\nclass<\/span> CloudThumbnailer<\/span> extends<\/span> Thumbnailer<\/span> <\/span>{\n\u00a0 \/\/ Example URL-based thumbnail; the caller does not care how it is built<\/span>\n\u00a0 make(asset) {\n\u00a0 \u00a0 const<\/span> base = \"https:\/\/res.cloudinary.com\/demo\/image\/upload\/\"<\/span>;\n\u00a0 \u00a0 const<\/span> t = \"c_fill,w_300,h_300,q_auto,f_auto\"<\/span>;\n\u00a0 \u00a0 return<\/span> `${base}<\/span>${t}<\/span>\/${asset.publicId}<\/span>.${asset.ext}<\/span>`<\/span>;\n\u00a0 }\n}\n\nfunction<\/span> buildThumbnails<\/span>(assets, service<\/span>) <\/span>{\n\u00a0 return<\/span> assets.map(a<\/span> =><\/span> service.make(a));\n}\n\nconst<\/span> assets = [\n\u00a0 { publicId<\/span>: \"sample\"<\/span>, ext<\/span>: \"jpg\"<\/span>, path<\/span>: \"\/tmp\/sample.jpg\"<\/span> },\n\u00a0 { publicId<\/span>: \"logo\"<\/span>, ext<\/span>: \"png\"<\/span>, path<\/span>: \"\/tmp\/logo.png\"<\/span> }\n];\n\nconsole<\/span>.log(buildThumbnails(assets, new<\/span> LocalThumbnailer()));\nconsole<\/span>.log(buildThumbnails(assets, new<\/span> CloudThumbnailer()));<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nCommon Pitfalls and Tips<\/h3>\n\n\n\n
\n
Applying the Same Idea With Cloudinary<\/h3>\n\n\n\n
TL;DR<\/h3>\n\n\n\n
\n
Learn More<\/h2>\n\n\n\n