Abstract Class Vs Interface Javascript

5 min read Jun 22, 2024

Abstract Class vs Interface in JavaScript

JavaScript, being a dynamically typed language, doesn't have the concept of abstract classes or interfaces in the traditional sense. However, thanks to the introduction of classes and the extends keyword in ES6, we can implement similar behavior using abstract class-like and interface-like patterns. Let's explore their differences and how to use them effectively.

Abstract Class-like Behavior

What is an abstract class?

An abstract class is a blueprint for creating other classes. It cannot be instantiated directly, and its primary purpose is to provide a common structure and shared functionality to derived classes.

How to achieve abstract class-like behavior in JavaScript:

Use the abstract keyword (ES7+):
```
abstract class Shape {
  abstract getArea(): number;

  draw() {
    console.log("Drawing a shape...");
  }
}
```
- abstract keyword marks a class or method as abstract.
- Abstract methods must be implemented by derived classes.

Use throw new Error() for unimplemented methods:

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

  draw() {
    console.log("Drawing a shape...");
  }
}

We throw an error if the abstract method is called without being implemented.

Example:

// Abstract class-like
class Shape {
  getArea() {
    throw new Error("Method 'getArea()' must be implemented in derived class");
  }

  draw() {
    console.log("Drawing a shape...");
  }
}

class Circle extends Shape {
  constructor(radius) {
    super();
    this.radius = radius;
  }

  getArea() {
    return Math.PI * this.radius * this.radius;
  }
}

const myCircle = new Circle(5);
console.log(myCircle.getArea()); // Output: 78.53981633974483
myCircle.draw(); // Output: Drawing a shape...

Interface-like Behavior

What is an interface?

An interface defines a contract that classes can implement. It specifies the methods and properties that a class must have, but doesn't provide any implementation.

How to achieve interface-like behavior in JavaScript:

Use a plain object as an interface:
```
interface Drawable {
  draw(): void;
}
```
- This object defines the shape of the interface.
Use implements to enforce the interface contract:
```
class Square implements Drawable {
  draw() {
    console.log("Drawing a square...");
  }
}
```
- implements keyword indicates that the class adheres to the interface.

Example:

// Interface-like
interface Drawable {
  draw(): void;
}

class Square implements Drawable {
  draw() {
    console.log("Drawing a square...");
  }
}

const mySquare = new Square();
mySquare.draw(); // Output: Drawing a square...

Key Differences

Feature	Abstract Class-like	Interface-like
Functionality	Provides shared methods and properties	Defines contract only
Inheritance	Uses `extends` keyword	Uses `implements` keyword
Instantiation	Cannot be instantiated	Not applicable
Implementation	Can provide partial implementation	No implementation provided

Advantages and Disadvantages

Abstract Class-like:

Advantages: Provides a base for inheritance, allows sharing common logic.
Disadvantages: Requires implementation of all abstract methods, less flexible.

Interface-like:

Advantages: Enforces contract, promotes code reusability, highly flexible.
Disadvantages: No implementation provided, may require more boilerplate code.

Conclusion

While JavaScript doesn't have native support for abstract classes and interfaces, we can effectively mimic their behavior using the patterns described above. Choose the approach that best suits your specific needs and coding style. Abstract classes offer a more structured approach with shared logic, while interfaces provide flexibility and enforce contracts.