JavaScript 디자인 패턴 예시들

책 <자바스크립트 + 리액트 디자인 패턴> (한빛미디어)를 읽고 19개의 패턴의 간단한 정의와 예시들을 정리해본다.

사진: Unsplash 의 Hardingferrent

생성 패턴

객체를 생성하는 방법을 다루는 패턴

 

생성자 패턴

*ES6의 class 문법을 사용

 

객체 지향 프로그래밍을 위한 문법적 설탕(syntactic sugar)으로, constructor 메서드를 통해 객체 초기화를 수행하고 new 키워드를 사용하여 인스턴스를 생성하는 구조이다. class 내부에서 속성과 메서드를 정의하며, 상속 및 캡슐화 같은 OOP 개념도 자연스럽게 표현할 수 있다.

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    sayHello() {
        console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
    }
}

const person1 = new Person('John', 30);
person1.sayHello(); // Hello, my name is John and I am 30 years old.

const person2 = new Person('Jane', 25);
person2.sayHello(); // Hello, my name is Jane and I am 25 years old.

 

장점

• 코드 재사용성 up
• 캡슐화 용이

 

모듈 패턴

변수와 함수를 캡슐화하고 공개(public) 또는 비공개(private) 인터페이스를 정의하기 위한 디자인 패턴이다. 간단히 말해 데이터 은닉과 네임스페이스 충돌 방지를 위한 구조다.

 

const CounterModule = (function () {
  // private 변수
  let count = 0;

  // private 함수
  function logCount() {
    console.log("Current count:", count);
  }

  // public API
  return {
    increment: function () {
      count++;
      logCount();
    },
    reset: function () {
      count = 0;
      logCount();
    }
  };
})();

// 사용
CounterModule.increment(); // Current count: 1
CounterModule.increment(); // Current count: 2
CounterModule.reset();     // Current count: 0

 

 

클로저를 사용하는 위 방식은 옛날 방식이고, ES6부터 도입된 ES Module이 현재 널리 사용되는 방식이다. import와 export를 사용하고, 파일이 스코프라서 export를 사용하면 자동 은닉된다. 비동기 실행, 트리 셰이킹 등도 가능하다.

 

장점

• 은닉화
• 공개 메서드만 노출해 API 처럼 사용