javascript에서는 전역유효범위를 지저분하게 하는것을 좋은 패턴이라 하기 어렵다.

코딩을 하다보면 라이브러리를 가져다 쓸 경우가 많이 생긴다. 그러다보면 타인이 작성한 코드가 내 코드에 들어와있을텐데

만약 전역스페이스에 동일변수가 선언되어 있고 유용하게 쓰여지고 있었다면 충돌로 인해 큰 오류를 만들어낼 수 있다.


그 대신 전역객체를 하나 생성하고 그 안에 전부 때려박는걸 네임스페이스패턴이라고 한다.


// 권장하지 않는 안티패턴

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
//생성자 함수 2개
function Parent() {};
function Child() {};

//변수 1개
var kid = 4;

//객체 2개
var module = {};
module.data = { a:1, b:2 };
var module = {};

전역 유효범위에 총 5개를 할당함으로써 전역스페이스를 어지럽히고 있다.


위와같은게 아닌 전역객체를 하나 생성하고 그 안에 전부 넣도록 하자.

// 권장하는 네임스페이스 패턴

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
var APP = {};

APP.Prent = function () {};
APP.Child = function () {};

APP.kid = 4;

// 객체 컨테이너
APP.modules = {};

// 객체들을 컨테이너 안에 추가
APP.modules.module1 = {};
APP.modules.module.data = { a:1, b:2 };
APP.modules.module2 = {};



하지만 네임스페이스 패턴에는 단점이 존재한다.

 

  • 접두어를 매번 붙여야되기 때문에 코드량이 증가한다.
  • 전역 인스턴스가 하나 뿐이기 때문에 코드의 어느 부분을 수정하더라도 전역 인스턴스가 수정된다. 나머지 기능들도 수정된 상태를 받게 된다

네임스페이스패턴에서 하나의 전역 인스턴스를 선언할 때에도 검사를 해 주는것이 좋다.
따라서 요롷게!

 

1
2
3
4
5
6
7
8
if(typeof APP === "undefined"){
   var APP = {};
}

// 혹은
// 짧은 or 사용법. 첫번째 지정된 피연산자가 undefined면 첫번째 피연산자 사용. 
// 아니면 두번째 피연산자 아니면 세번째 피연산자...
var APP = APP || {};