[Design Pattern] 노출모듈 패턴(revealing module pattern)

노출모듈 패턴

• 즉시 실행 함수를 통해 private, public 같은 접근 제어자를 만드는 패턴
• 자바스크립트는 접근 제어자가 존재하지 않고 전역 범위에서 스크립트가 실행되기 때문에 노출모듈 패턴을 통해 private와 public 접근 제어자를 구현
  → 전역 범위에서 실행되는 프로그램은 내부 어플리케이션과 종속된 라이브러리 코드의 데이터들로 인해 충돌이 발생 할 수 있음.

🤔 즉시 실행 함수?

(function () {
    // statements
})()

• 1. 함수를 정의, 2. 변수에 함수를 저장, 3. 실행의 과정이 아닌 함수를 정의하자마자 바로 호출하는 함수
• 초기화 코드, 라이브러리 내 전역 변수의 충돌 방지 등에 사용한다.

🤔 접근 제어자

• public
  클래스에 정의된 함수에서 접근 가능하며 자식 클래스와 외부 클래스에서 접근 가능한 범위
• protected
  클래스에 정의된 함수에서 접근 가능, 자식 클래스에서 접근 가능하지만 외부 클래스에서 접근 불가능한 범위
• private
  클래스에 정의된 함수에서 접근 가능하지만 자식 클래스와 외부 클래스에서 접근 불가능한 범위

장점

• 개발자에게 깔끔한 접근 방법을 제공
• private 데이터 제공
• 전역 변수를 덜 더럽힘
• 클로저를 통해 함수와 변수를 지역화
• 스크립트 문법이 더 일관성 있음
• 명시적으로 public 메소드와 변수를 제공해 명시성을 높임

단점

• private 메소드 접근할 방법이 없음 (그래서 테스트 불가란 얘기를 하는데 private은 테스트 할지 안할지 고민해봐야)
• private 메소드에 대해 함수 확장하는데 어려움이 있음
• private 메소드를 참조하는 public 메소드를 수정하기 어려움

구현

const module1 = (() => {
  const privateFoo = () => {};
  const privateBar = [];

  const exported = {
    publicFoo: () => {},
    publicBar: () => {},
  };

  return exported; //private 범위를 만들고 공개할 부분만 export 합니다.
})();

console.log(module1);

{ publicFoo : [Function: publicFoo],
  publicBar : [Function: publicBar] }

Example

const pukuba = (() => {
    const a = 1
    const b = () => 2
    const public = {
        c : 2, 
        d : () => 3
    }
    return public
})()
console.log(pukuba)
console.log(pukuba.a)
// { c: 2, d: [Function: d] }
// undefined

• a와 b : 다른 모듈에서 사용할 수 없는 변수나 함수, private 범위
• c와 d : 다른 모듈에서 사용할 수 있는 변수나 함수, public 범위
• cf) 노출모듈패턴을 기반으로 만든 자바스크립트 모듈 방식으로는 CJS(CommonJS) 모듈 방식이 있다.

var myModule = (function(window, undefined) {
  // private
  function myMethod() {
    console.log('myMethod');
  }

  function myOtherMethod() {
    console.log('myOtherMethod');
  }

  return {
    //public 
    someMethod: myMethod,
    someOtherMethod: myOtherMethod
  };
})(window);

myModule.myMethod(); // Uncaught TypeError: myModule.myMethod is not a function
myModule.myOtherMethod(); // Uncaught TypeError: myModule.myOtherMethod is not a function
myModule.someMethod(); // console.log('myMethod');
myModule.someOtherMethod(); // console.log('myOtherMethod');

😎 참고자료

면접을 위한 CS 전공지식 노트
노출식 모듈 패턴 Revealing Module Pattern
노출식 모듈 패턴