Abstract Class And Interface In Javascript

MUAZHAN

4 min read

·

Jun 22, 2024

42

Share

Abstract Classes and Interfaces in JavaScript

JavaScript, being a dynamically typed language, doesn't have the conventional concept of abstract classes and interfaces like statically typed languages. However, with the help of ES6 classes and mixins, you can mimic the functionalities of abstract classes and interfaces to achieve similar benefits in your JavaScript code.

Abstract Classes:

An abstract class is a blueprint for classes that cannot be instantiated directly. Instead, they are meant to be extended by other classes. Abstract classes usually contain abstract methods, which are methods declared but not implemented. Subclasses are required to implement these abstract methods.

Mimicking Abstract Classes in JavaScript:

1. Use a constructor with throw new Error():

   class Shape {
       constructor() {
           throw new Error("Can't instantiate abstract class Shape");
       }
       getArea() {
           throw new Error("Method 'getArea' must be implemented in subclass");
       }
   }
   

2. Define abstract methods as regular functions and throw an error:

   class Shape {
       getArea() {
           throw new Error("Method 'getArea' must be implemented in subclass");
       }
   }
   

3. Use a Symbol to identify abstract methods:

   const abstractMethod = Symbol('abstractMethod');
   
   class Shape {
       getArea() {
           if (this[abstractMethod] === abstractMethod) {
               throw new Error("Method 'getArea' must be implemented in subclass");
           }
       }
   }
   Shape.prototype.getArea = abstractMethod;
   

Interfaces:

An interface defines a contract that specifies the methods a class must implement. It acts as a blueprint for the structure and behavior of an object.

Mimicking Interfaces in JavaScript:

1. Use TypeScript: TypeScript, a superset of JavaScript, provides built-in support for interfaces.
2. Use a mixin:

   const DrawableMixin = {
       draw() {
           throw new Error("Method 'draw' must be implemented in subclass");
       }
   };
   
   class Circle {
       constructor(radius) {
         this.radius = radius;
       }
       getArea() {
           return Math.PI * Math.pow(this.radius, 2);
       }
   }
   
   Object.assign(Circle.prototype, DrawableMixin);
   

Benefits of Using Abstract Classes and Interfaces:

• Code Reusability: Define common properties and methods once and reuse them across different classes.
• Improved Maintainability: Changes in the abstract class or interface automatically affect all subclasses that implement it.
• Enhanced Structure and Consistency: Enforce a clear structure and consistent behavior for related classes.
• Improved Readability: Easier to understand the intended structure and behavior of a codebase.

Note: Although JavaScript doesn't directly support abstract classes and interfaces, these techniques allow you to achieve a similar level of structure and organization in your code. Choose the method that best suits your project's needs and coding style.