Web developers are always looking for new design patterns to use in their projects. JavaScript is one of the most popular languages for web development, and there are many different design patterns available. In this article, we will go over some basic types of design patterns and how you might use them in your own projects.

Abstract class

An abstract class is a class that cannot be instantiated. It's used to define the interface of a group of classes, but it doesn't have any implementation details.

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} starts making noises`);
  }

  eat() {
    console.log(`${this.name} starts eating.`);
  }
}

class Rabbit extends Animal {
  hide() {
    console.log(`${this.name} hides!`);
  }
}

let myRabbit = new Rabbit('Lilo');
myRabbit.hide(); // Lilo hides!

Adapter pattern

The adapter pattern allows you to wrap an existing class with another class and thus change its interface, without affecting consumers.

class CarInterface {
  startEngine() {
    throw new Error("startEngine() must be implemented");
  }
}

class OldCar {
  ignite() {
    return "Igniting the old car's engine.";
  }
}

class CarAdapter extends CarInterface {
  constructor(oldCar) {
    super();
    this.oldCar = oldCar;
  }

  startEngine() {
    return this.oldCar.ignite();
  }
}

const carAdapter = new CarAdapter(new OldCar());
console.log(carAdapter.startEngine()); // Igniting the old car's engine.

Builder pattern

The Builder pattern allows you to create complex objects step by step, and gives you the flexibility to change the construction process without affecting the client code.

class Car {
  constructor() {
    this.engine = "";
    this.seats = "";
    this.wheels = "";
  }

  getInfo() {
    return `This car has a ${this.engine} engine, ${this.seats} seats, and ${this.wheels} wheels.`;
  }
}

class SportCarBuilder {
  constructor() {
    this.car = new Car();
  }

  setEngine(engine) { this.car.engine = engine; return this; }
  setSeats(seats) { this.car.seats = seats; return this; }
  setWheels(wheels) { this.car.wheels = wheels; return this; }
  getCar() { return this.car; }
}

const sportCar = new SportCarBuilder()
  .setEngine("V8")
  .setSeats("2")
  .setWheels("4")
  .getCar();

console.log(sportCar.getInfo());
// This car has a V8 engine, 2 seats, and 4 wheels.

Decorator pattern

The decorator pattern adds new functionality to existing objects without modifying the original object.

class Car {
  cost() { return 20000; }
  getDescription() { return "Basic car"; }
}

class LeatherSeats {
  constructor(car) { this.car = car; }
  cost() { return this.car.cost() + 3000; }
  getDescription() { return `${this.car.getDescription()}, Leather seats`; }
}

class AlloyWheels {
  constructor(car) { this.car = car; }
  cost() { return this.car.cost() + 2000; }
  getDescription() { return `${this.car.getDescription()}, Alloy wheels`; }
}

let myCar = new Car();
myCar = new LeatherSeats(myCar);
myCar = new AlloyWheels(myCar);

console.log(myCar.getDescription()); // Basic car, Leather seats, Alloy wheels
console.log(myCar.cost()); // 25000

Facade pattern

The facade pattern hides complex details from the user, while still allowing them to interact with it through a simplified interface.

class BankService {
  constructor() {
    this.balance = 0;
  }

  deposit(amount) { this.balance += amount; }
  withdraw(amount) { if (this.balance >= amount) this.balance -= amount; }
  getBalance() { return this.balance; }
}

const bankService = new BankService();
bankService.deposit(1000);
console.log(bankService.getBalance()); // 1000
bankService.withdraw(500);
console.log(bankService.getBalance()); // 500

Conclusion

I hope you found this article helpful in learning about the various design patterns used in web development. As you continue your journey as a developer, it will be important to keep an eye out for new patterns that emerge or old ones that have been reimagined with modern technology.