JavaScript 디자인 패턴

🎨 디자인 패턴 (Design Patterns)

디자인 패턴은 자주 반복되는 문제를 해결하기 위한 재사용 가능한 설계 템플릿입니다. 자바스크립트는 객체지향, 함수형 프로그래밍 모두 지원하므로 다양한 패턴이 적용됩니다. 여기서는 실무에서 많이 쓰이는 주요 패턴을 소개합니다.

📦 1. 모듈 패턴 (Module Pattern)

모듈 패턴은 변수나 함수를 외부에 노출하지 않고 캡슐화하여 유지보수를 쉽게 합니다. 즉시실행함수(IIFE)를 사용하여 프라이빗 스코프를 만듭니다.

const Counter = (function() {
  let count = 0;

  return {
    increment() {
      count++;
      console.log(count);
    },
    reset() {
      count = 0;
    }
  };
})();

Counter.increment(); // 1
Counter.increment(); // 2

장점: 전역 변수 오염 방지, 캡슐화 지원

👀 2. 옵저버 패턴 (Observer Pattern)

한 객체의 상태 변화가 다른 객체에 자동으로 반영되도록 하는 패턴입니다. 주로 이벤트 시스템이나 Pub/Sub 구조에 사용됩니다.

class Subject {
  constructor() {
    this.observers = [];
  }

  subscribe(fn) {
    this.observers.push(fn);
  }

  notify(data) {
    this.observers.forEach(fn => fn(data));
  }
}

const news = new Subject();
news.subscribe(msg => console.log("Subscriber 1:", msg));
news.subscribe(msg => console.log("Subscriber 2:", msg));
news.notify("🎉 새 소식 도착!");

장점: 컴포넌트 간 결합도 낮추기

🔄 3. 싱글턴 패턴 (Singleton Pattern)

애플리케이션 전체에서 단 하나의 인스턴스만 존재하도록 보장합니다. 상태 공유가 필요한 설정 객체 등에 사용됩니다.

const Config = (function() {
  let instance;

  function createInstance() {
    return { appName: "MyApp", version: "1.0" };
  }

  return {
    getInstance() {
      if (!instance) {
        instance = createInstance();
      }
      return instance;
    }
  };
})();

const appConfig1 = Config.getInstance();
const appConfig2 = Config.getInstance();
console.log(appConfig1 === appConfig2); // true

주의: 전역 상태 공유 시, 동기화 관리 필요

⚙️ 4. 팩토리 패턴 (Factory Pattern)

객체 생성을 함수로 캡슐화하여 인스턴스 생성 로직을 감춥니다. 다양한 객체를 동적으로 만들 수 있습니다.

function createAnimal(type) {
  if (type === "dog") {
    return { sound: () => "멍멍" };
  } else if (type === "cat") {
    return { sound: () => "야옹" };
  }
}

const dog = createAnimal("dog");
console.log(dog.sound());

장점: 다양한 객체 유형을 유연하게 생성 가능

🔗 5. 전략 패턴 (Strategy Pattern)

알고리즘을 객체화하여 실행 중 전략(로직)을 동적으로 교체할 수 있습니다.

const strategies = {
  add: (a, b) => a + b,
  sub: (a, b) => a - b
};

function operate(a, b, strategy) {
  return strategies[strategy](a, b);
}

console.log(operate(5, 3, "add")); // 8

장점: 조건문 없는 유연한 알고리즘 대체

✅ 정리

• 모듈 패턴: 변수 보호 및 구조화
• 옵저버 패턴: 이벤트 기반 설계
• 싱글턴 패턴: 전역 상태 관리
• 팩토리 패턴: 객체 생성 추상화
• 전략 패턴: 알고리즘 교체 유연성