Javascript 네임스페이스 패턴(Namespace Pattern)

전역 네임스페이스 (Global Namespace)의 오염 문제를 코드 리뷰를 하다 알게 되었다. 특히 여러 스크립트가 한 소스 안에 있는 코드에서는 전역 변수 네임이 겹칠 우려가 있고 이는 소스의 신뢰성이 낮아진다는 단점으로 연결된다.

 

네임 스페이스 패턴?

 

전역 유효 범위가 많은 변수, 객체, 함수 등으로 코드가 어지러워지지 않도록 전역 객체 하나만 만들고, 모든 기능을 이 객체 안에 추가하는 패턴을 네임스페이스 패턴이라고 한다.

 

네임스페이스 패턴을 적용하지 않은 상태)

 

// variable
var variable = 0;

// object
var obj = {};

// function
function a(){};

 

네임스페이스 패턴을 적용한 상태)

 

var APP = {};

// variable
APP.variable = 0;

// object
APP.obj = {};

// function
APP.A = function() {};

 

보통 전역 객체의 네임은 대문자를 사용한다. 그리고 코드가 여러 파일로 분리되어 있을 때는 덮어 쓰는 경우가 있으니 선언 여부를 확인해줘야 한다.

 

var APP = {};

if (typeof APP === "undefined") {
    var APP = {};
}

var APP = APP || {};

var APP = APP || {}; // APP이 생성되었는지 확인
APP.nsFunc = function (nsStr) {
    // '.'을 기준으로 namespace를 분류
    var sections = nsStr.split('.'),
        parent = APP,
        i;

    // APP은 이미 생성되어 있으니 제거
    if (sections[0] === "APP") {
        sections = sections.slice(1);
    }

    var s_length = sections.length;
    for (i=0; i<s_length; i+=1) {
        // property가 없으면 생성
        if (typeof parent[sections[i]] === "undefined") {
            parent[sections[i]] = {};
        }
        parent = parent[sections[i]];
    }
    return parent;
};

 

이와 같이 네임스페이스가 잘 만들어지는 것을 볼 수 있다.