Skip to main content

Template Method Pattern in JavaScript (Live Playground)

The Template Method pattern is a behavioral design pattern that defines the skeleton of an algorithm in a base class but lets derived classes override specific steps of the algorithm without changing its structure. This pattern promotes code reusability and maintainability by allowing you to create a common template for related algorithms with varying implementations. In this tutorial, we'll explore the Template Method pattern in JavaScript, including its use cases, implementation, and benefits.

Why Use the Template Method Pattern?​

The Template Method pattern is useful when you want to:

  1. Implement a common algorithm structure for a group of related algorithms.
  2. Encapsulate variations of an algorithm within separate classes.
  3. Promote code reusability and maintainability by creating a template for algorithms.

Implementing the Template Method Pattern in JavaScript​

Here's an example of how to implement the Template Method pattern using JavaScript classes:

TypeScript
// Abstract class
class AbstractClass {
  templateMethod() {
    this.primitiveOperation1();
    this.primitiveOperation2();
  }

  primitiveOperation1() {
    throw new Error('Method "primitiveOperation1" must be implemented');
  }

  primitiveOperation2() {
    throw new Error('Method "primitiveOperation2" must be implemented');
  }
}

// Concrete classes
class ConcreteClassA extends AbstractClass {
  primitiveOperation1() {
    console.log('Primitive operation 1 in ConcreteClassA');
  }

  primitiveOperation2() {
    console.log('Primitive operation 2 in ConcreteClassA');
  }
}

class ConcreteClassB extends AbstractClass {
  primitiveOperation1() {
    console.log('Primitive operation 1 in ConcreteClassB');
  }

  primitiveOperation2() {
    console.log('Primitive operation 2 in ConcreteClassB');
  }
}

// Client code
const concreteClassA = new ConcreteClassA();
const concreteClassB = new ConcreteClassB();

concreteClassA.templateMethod(); // Output: Primitive operations 1 and 2 in ConcreteClassA
concreteClassB.templateMethod(); // Output: Primitive operations 1 and 2 in ConcreteClassB

In this example, the AbstractClass represents the base class with the templateMethod that outlines the algorithm's structure. The ConcreteClassA and ConcreteClassB are concrete classes that provide their implementations for the primitiveOperation1 and primitiveOperation2 methods. The client code creates concrete class instances and invokes their templateMethod.

Live Playground, Try it Yourself

Benefits of the Template Method Pattern​

Implementing the Template Method pattern in your JavaScript projects offers several benefits:

  1. Code Reusability: The Template Method pattern promotes code reusability by creating a common template for related algorithms.
  2. Maintainability: The Template Method pattern encapsulates algorithm variations within separate classes, making your code more maintainable and easier to modify.
  3. Flexibility: The Template Method pattern allows you to easily extend or modify specific steps of an algorithm without affecting its overall structure.

Conclusion​

In summary, the Template Method pattern is a valuable tool in JavaScript development that can help you create maintainable, reusable code. By understanding and implementing this pattern, you can enhance your web development skills and create more robust applications.