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

네임 스페이스 패턴이란?

"전역을 피하는 코딩 기법!"
어플리케이션이나 라이브러리를 위해 전역 유효 범위에 많은 변수, 함수, 객체 등으로 어지럽히지 않도록 하기 위해 전역 객체를 하나만 만들고, 모든 기능을 이 객체에 추가하는 패턴을 네임스페이스 패턴이라고 한다.
스크립트가 실행되는 환경을 항상 일정하게 만들어 관리하기 쉽게 만드는 일이다. 단순히 기능을 한데 묶기 위해 사용하는 객체를 네임스페이스라고 한다.

// 생성자 함수 2개
function a() {}
function b() {}

// 변수 1개
var variable = 0;

// 객체 1개
var module_object = {};

이렇게 엄청 많은 함수와 변수등을 전역으로 만들면 안티패턴이 된다. 그렇기 때문에 아래와 같이 바꿔주는 것이 좋다.

var APP = {};

// 생성자
APP.a = function() {};
APP.b = function() {};

// 변수
APP.variable = 0;

// 객체
APP.module_object = {};

흔히 코드의 가독성을 위해 전역 객체의 이름은 모두 대문자로 쓰기도 한다고 한다. 이런 패턴은 코드 내의 이름 충돌을 방지해줄 수 있다.(자바스크립트 라이브러리나 위젯 등의 third-party 코드와의 이름 충돌도 방지해 줄 수 있다.)

계층적 의미에 맞춰서 기능들을 그룹화할 수 있다.
해당 기능을 어디에서 호출하는지 혼란스럽지 않아 유지보수에 용이하다.
전역 변수를 줄일 수 있다.

프로그램이 복잡해지면서 코드의 각 부분들이 파일로 분리되어 문서에 포함되는 경우가 많은데, 그러다보면 이미 있는걸 덮어쓰는 경우가 있으니 아래 예시의 1번처럼 객체를 바로 선언하는게 아니라 2번처럼 MYAPP이 이미 선언되었는지 확인하고 정의해줘야 한다. (3번과 2번은 같음)
그런데 이것의 문제는 Namespace의 깊이가 깊어질수록 단계별로 계속 확인해주어야 한다는 것이다.

// 1번
var MYAPP = {};

// 2번
if (typeof MYAPP === "undefined") {
    var MYAPP = {};
}

// 3번
var MYAPP = MYAPP || {};

그래서 이렇게 이러한 작업을 맡을 함수를 미리 선언하고 전역 객체가 존재하는지 확인하고 만들어줄 수 있다.

var MYAPP = MYAPP || {}; // MYAPP이 이미 선언되었는지 확인 후 객체생성
MYAPP.nsFunc = function (ns_string) {
    // '.'으로 구분된 네임스페이스 표기를 쪼갬
    var sections = ns_string.split('.'),
        parent = MYAPP,
        i;

    // 최상단의 MYAPP객체는 이미 선언되었으므로 제거
    if (sections[0] === "MYAPP") {
        sections = sections.slice(1);
    }

    var s_length = sections.length;
    for (i=0; i<s_length; i+=1) {
        // 프로퍼티가 존재하지 않아야만 생성
        if (typeof parent[sections[i]] === "undefined") {
            parent[sections[i]] = {};
        }
        parent = parent[sections[i]];
    }
    return parent;
};

사용은 아래와 같이 하면 된다.

MYAPP.nsFunc('woowa.frontend.javascript.crew')
console.log(window.MYAPP)

그럼 아래와 같이 네임스페이스가 잘 만들어 진 것을 볼 수 있다.