Builder Pattern in JavaScript

Welcome back! So far, we've covered various creational design patterns like the Singleton Pattern, Factory Method Pattern, and Abstract Factory Pattern. These patterns have helped you control and simplify object creation in your programs. Today, we are delving into another powerful creational pattern — the Builder Pattern. This pattern allows you to construct complex objects step by step, making the creation process more manageable and modular.

The Builder Pattern is a design pattern that provides a way to construct complex objects step by step. It decouples the construction process from the representation, allowing the same construction process to create different representations. This pattern includes several key components: the product (the complex object to be created), the builder interface (specifying the construction steps), one or more concrete builders (implementing the construction steps for different representations), and a director (managing the construction process).

Let's break down the implementation of the Builder Pattern in JavaScript with an example. For this example, we will create different types of houses using various builders.

First, we define the House class, which will be our complex object:

class House {
    constructor() {
        this.foundation = null;
        this.structure = null;
        this.roof = null;
    }

    setFoundation(foundation) {
        this.foundation = foundation;
    }

    setStructure(structure) {
        this.structure = structure;
    }

    setRoof(roof) {
        this.roof = roof;
    }

    showHouse() {
        console.log(`House with ${this.foundation}, ${this.structure}, and ${this.roof}.`);
    }
}

In this class, the House object has three main parts: the foundation, the structure, and the roof. We also have methods to set these parts and a method to display the house.

JavaScript does not have native support for interfaces. Instead, we can document the expected methods a class should implement.

// HouseBuilder Interface
// Methods: 
// buildFoundation()
// buildStructure()
// buildRoof()
// getHouse()

This interface specifies the methods that any concrete builder must implement. The buildFoundation, buildStructure, and buildRoof methods represent the steps to construct a house.