[JS_Design Pattern] 1. 네임 스페이스 패턴 ( NameSpace Pattern )

NameSpace Pattern

전역 변수를 기초로 하는 JavaScript의 단점 때문에,

여러 스크립트가 한 페이지 안에 함께 있는 소스코드에서는 변수가 많아질 수록 이름이 겹칠 우려가 있다.

이는 협업에서도 상당히 중요한 부분이다.

뿐만 아니라 어느 곳에서도 접근할 수 있는 전역 변수이기에 소스의 신뢰도가 낮아질 수 있다.

이러한 단점들을 보완하기 위한 패턴이 네임스페이스 패턴이다.

네임 스페이스란 구분이 가능하도록 정해놓은 범위나 영역을 의미한다.

이름 그대로, 이름 공간을 선언하여 다른 공간과 구분하도록 하는 것이다.

객체 리터럴 네임 스페이싱(Object Literal NameSpacing)

하나의 전역 객체를 생성한 다음. 모든 함수, 객체, 변수를 이 전역객체에 추가하여 구현하는 방법이다.

이 방법은 JS 라이브러리나 서드 파티 코드와의 이름 충돌을 방지할 수 있다.

하지만 모든 변수, 함수에 상위 객체명을 붙여야 하기 때문에 코드 양이 많아진다.

그러면서 매번 객체에 접근할 때 마다 체인이 길어지고, 이름이 중첩된다.

code>

//전역 객체 하나 생성
var globVariable = {};
 
//객체의 프로퍼티로 추가
globVariable.num = 1;
 
//함수도 추가
globVariable.increaseNum = function(){
    console.log('increase!');
}
 
globVariable.decreaseNum = function(){
    console.log('decrease!');
}

범용 네임스페이스 함수

이미 있는 것을 재정의하는 일을 방지하기 위하여 사용하는 방법이다.

이를 확인하지 못해 재정의한다면 내용을 덮어쓰는 문제가 생기기 때문이다.

code>

//1번 방식
if(type of app === “undefined”){
  var app = {};
}
 
//2번 방식 == 1번 방식
var app = app || {};

네임스페이스를 오염시키지 않기 위한 여러 가지 패턴들을 살펴보았다.

이 네임스페이스 패턴은 주로 모듈 패턴과 함께 사용된다.

모듈 패턴에 대해서 알아보자

>> 모듈 패턴 ( Module Pattern ) >>

End --