[Javascript] 모듈 패턴 / 네임스페이스 패턴

 다른 프로그래밍 언어는 접근제한자가 있다. 그러나 자바스크립트에선 접근 제한자가 따로 없으므로, 클로저와 컨텍스트의 개념을 이용하여 변수와 메소드에 접근 제한자를 구현한다.

접근 제한자 (Access modifier) 

- 외부로부터 클래스 혹은 클래스 멤버들(메소드, 속성, 이벤트, 필드)로의 접근을 제한할 때 사용하는 예약어

- public, protected, private, default 등

클로저 (Closure)

- 함수 + 함수를 둘러싼 환경(Lexical environment)

- 같은 환경을 공유하지 않고, 자신의 고유 환경(블록)을 가진 상태로 외부 함수에 의해 호출되는 함수를 만드는 것

- 클로저 구현 방법 : 함수에서 함수를 반환 하도록 함

* 모듈 패턴 (Module Pattern)

위에서 언급한 것처럼, 접근 제한자가 따로 없으므로, 캡슐화를 구현할 때 사용하는 방법론 중 하나이다

- 전역 스페이스를 사용하지 않도록 함 -> 변수명 등이 겹치는 일을 방지하기 위하여 사용

- 구현 방법 : return 이하는 public 으로 접근할 수 있는 부분을 구현하고, 위쪽으로는 private 한 영역을 구현한다. 

  => 클로저로 닫혀있으므로, 외부에서 접근할 수 없는 private한 영역을 만들어 줄 수 있다.

모듈 패턴은 아래 패턴들을 조합한 것이다.

- 네임스페이스 패턴

- 즉시 실행 함수

- 비공개 멤버 & 특권 멤버

- 의존 관계 선언

- 네임스페이스 패턴

네임스페이스란 구분이 가능하도록 정해놓은 범위나 영역을 의미한다. 이름 그대로, 이름 공간을 선언하여 다른 공간과 구분하도록 하는 것이다.

 

· 하나의 전역 객체를 생성한 후, 모든 함수, 변수, 객체들을 그 전역 객체 안에 구현하는 방식

· 전역 변수의 개수를 줄이고, 같은 이름 충돌을 방지하며, 변수명이 불필요하게 길어짐을 방지한다. 

· But. 각 프로퍼티(변수, 객체 등) 상위 객체명을 계속 붙여야하므로 소스 양은 늘어난다

(1) 모듈 패턴의 일반적인 틀 :

var obj = ({function()
    /* private 구현 */ 

    return{ /* public 구현 */  }
})();

(2) 예시 : 

var remoteController = (function(){
    var power = false;     
    var channel = null;
    return {
        onPower : function() {
            power = !power;
            return "전원을" + (power?" 켭니다":" 끕니다");
        },
        setChannel : function(chn) {
            channel = chn;
            return "채널 변경 : " + channel;
        }
    }
})();

remoteController.power;       // undefined : private
remoteController.onPower();   // 변경된 power값 반환 : public    

private 영역에 있는 power 와 channel 변수를 직접 접근하려고 할 때는 undefined 가 뜨지만,

public 영역에 있는 onPower 또는 setChannel 로는 각각의 값을 확인 할 수 있다. 

(3) 네임스페이스와 결합한 모듈 패턴 :

var MYAPP = MYAPP || {};    // MYAPP이 없다면 {} 로 초기화 > 하나의 전역 객체 선언
 
 
MYAPP.remoteController = (function(){
    var power = false;     
    var channel = null;
    return{
        onPower : function() {
            power = !power;
            return "전원을" + (power?" 켭니다":" 끕니다");
        },
        setChannel : function(chn) {
            channel = chn;
            return "채널 변경 : " + channel;
        }
    }
})();
 
MYAPP.remoteController.power;       // MYAPP 의 전역 객체 내에 구현되었으므로, 체인을 타고 호출한다.
MYAPP.remoteController.onPower();   

참고 :

https://meetup.toast.com/posts/86

https://jdm.kr/blog/126