[디자인 패턴] 노출모듈 패턴

이 글은 면접을 위한 CS 전공지식노트의 책을 읽고 학습 후 스터디 공유를 위한 글입니다.

노출모듈 패턴이란?

즉시 실행 함수를 통해 private, public 같은 접근 제어자를 만드는 패턴. JS는 접근 제어자가 존재하지 않고 전역 범위에서 스크립트 실행된다. 그래서 노출 모듈 패턴을 통해 private과 public 접근 제어자를 구현하기도 한다.(ES2019에 접근제한자 관련된 문법이 추가 private은 #을 이용한다.)

Private properties get created by using a hash # prefix and cannot be legally referenced outside of the class.
출처: MDN

protected 프로퍼티 명 앞엔 밑줄 _이 붙습니다.

자바스크립트에서 강제한 사항은 아니지만, 밑줄은 프로그래머들 사이에서 외부 접근이 불가능한 프로퍼티나 메서드를 나타낼 때 씁니다.
출처: 자바스크립트 인포

const otter = (() => {
  const a = 1;
  const b = () => 2;

  const public = {
    c: 2,
    d: () => 3,
  };

  return public;
})();

console.log(otter);
// {c: 2, d:[Function: d]}
console.log(otter.a);
// undefined

• a, b는 다른 모듈에서 사용할 수 없는 변수, 함수인 private 범위를 가진다.
• c, d는 다른 모듈에서 사용할 수 없는 변수, 함수인 public 범위를 가진다.
• 이 원리를 기반으로 만든 자바스크립트 모듈 방식으로 CJS(CommonJS)가 있다.
  

    // module.js 파일
    
    // 모듈 정의
    const privateVariable = "This is a private variable";
    
    function privateFunction() {
      console.log("This is a private function");
    }
    
    // 외부로 노출할 요소들을 객체에 할당하여 exports 객체에 할당
    module.exports = {
      publicVariable: "This is a public variable",
      publicFunction: function() {
        console.log("This is a public function");
      }
    };
    
    // main.js
    // 모듈 불러오기
    const myModule = require('./module');
    
    // 노출된 요소에 접근
    console.log(myModule.publicVariable); // "This is a public variable"
    myModule.publicFunction(); // "This is a public function"

추가 조사 자료: 접근 제어자
- public: 클래스에 정의된 함수에서 접근 가능, 자식 클래스, 외부 클래스에서 접근 가능한 범위
- protected: 클래스에 정의된 함수에서 접근 가능, 자식클래스에서 접근 가능하나 외부 클래스에서는 접근 불가
- private: 클래스에 정의된 함수에서 접근 가능, 자식 클래스, 외부 클래스 접근 불가