[javascript] 자바스크립트의 디자인 패턴(Design Pattern): 싱글톤, 팩토리, 옵저버 등

22 Dec 2023

javascript

자바스크립트는 다양한 디자인 패턴을 활용하여 코드를 구조화하고 유지보수성을 높일 수 있습니다. 이 게시글에서는 자바스크립트의 대표적인 디자인 패턴인 싱글톤(Singleton), 팩토리(Factory), 그리고 옵저버(Observer)에 대해 살펴보겠습니다.

1. 싱글톤(Singleton) 디자인 패턴

싱글톤은 단 하나의 인스턴스를 생성하고, 어디서든지 해당 인스턴스에 접근할 수 있도록 하는 패턴입니다. 이를 통해 중복된 객체 생성을 방지하고 메모리를 절약할 수 있습니다.

class Singleton {
  constructor() {
    if (Singleton.instance) {
      return Singleton.instance;
    }
    this.data = "Singleton Instance";
    Singleton.instance = this;
  }
}

const instance1 = new Singleton();
const instance2 = new Singleton();

console.log(instance1 === instance2); // true
console.log(instance1.data); // "Singleton Instance"
console.log(instance2.data); // "Singleton Instance"

2. 팩토리(Factory) 디자인 패턴

팩토리는 객체 생성을 캡슐화하여 클라이언트가 객체를 직접 생성하는 것이 아닌, 팩토리에 의해 생성되도록 하는 패턴입니다. 이를 통해 객체 생성 로직을 별도로 분리하여 유연성을 확보할 수 있습니다.

class Product {
  constructor(type) {
    this.type = type;
  }
}

class ProductFactory {
  createProduct(type) {
    return new Product(type);
  }
}

const factory = new ProductFactory();
const productA = factory.createProduct('A');
const productB = factory.createProduct('B');

console.log(productA.type); // "A"
console.log(productB.type); // "B"

3. 옵저버(Observer) 디자인 패턴

옵저버는 객체간의 일대다 의존 관계를 정의하여, 어떤 객체의 상태가 변할 때 해당 객체에 의존하는 다른 객체들이 자동으로 업데이트되도록 하는 패턴입니다.

class Subject {
  constructor() {
    this.observers = [];
  }
  
  addObserver(observer) {
    this.observers.push(observer);
  }
  
  notifyAll() {
    this.observers.forEach(observer => observer.update());
  }
}

class Observer {
  update() {
    console.log("Object updated");
  }
}

const subject = new Subject();
const observerA = new Observer();
const observerB = new Observer();

subject.addObserver(observerA);
subject.addObserver(observerB);

subject.notifyAll();

이렇게 자바스크립트에서는 싱글톤, 팩토리, 옵저버 등 다양한 디자인 패턴을 활용하여 코드를 더욱 효율적으로 구성할 수 있습니다.

더 많은 디자인 패턴에 대해 알고 싶다면 GoF의 디자인 패턴을 참고하시기 바랍니다.