[ 자바스크립트 ] 디자인패턴 - 모듈패턴(JavaScript Module Pattern)

자바스크립트 모듈패턴

자바스크립트 모듈패턴에 대해서 많이 들어보셨을 거에요. 자바스크립트에서 수 많은 디자인패턴이 있습니다. 그중에서 가장 많이 사용 되어오고 있는 패턴이 모듈 패턴입니다. 

앞으로 자주쓰는 모듈패턴부터 옵저버패턴, 등 많은 디자인패턴들을 정리해서 올릴예정입니다.

이번 페이지의 목표는 모듈패턴을 사용하는 이유와 모듈패턴의 예시, 마지막으로 모듈패턴의 사용방법에 대해서 정리해 보겠습니다. 

모듈패턴의 키워드는 두개입니다.

• 독립된함수
• 자체적인 변수와 함수(비공개 변수)

모듈패턴의 사용이유와 예시

모듈(module)은 전체 어플리케이션의 일부를 독립된 코드로 분리해 놓은 것입니다.

자바스크립트를 사용하다보면 수많은 전역변수를 사용합니다. 사용을 하다보면, 전역 유효범위가 어지럽게 되는 문제가 발생 할 수 있는데 , 모듈 패턴은 어플리케이션이나 라이브러리를 위한 하나의 전역객체를 만들고 모든기능을 객체에서 추가하는것을 말합니다.

우리가 자주 사용해왔던 모듈패턴은 Jquery 라이브러리입니다. 제이쿼리에서도 모듈패턴으로 많이 사용하는데 우리가 수많은 라이브러리를 받았지만 소스충돌이 발생하지 않는 이유 입니다. 제이쿼리 라이브러리도 하나의 모듈이라고 볼 수 있습니다.

var module = { 
  number : 0, 
  numberCall : function () { 
    return this.number;
  } 
};

상단의 소스도 하나의 모듈이라고 볼수 있습니다. 하지만 위의 모듈 형태는 단점이 있습니다. 임의로 module변수에서 module.number값을 강제로 변경해 줄 수 있는 것입니다.

상단의 예시가 강제로 number값이 변경되는 경우입니다. 다음과 같은 모듈 객체는 비공개 변수를 설정할 수없습니다. 모듈 패턴은 독립적인 함수와 변수를 모두 갖고 있어야 합니다. 

변수 newModule내부의 number값을 바꾸려 했지만 비공개 되어있어 바꿀 수 없습니다. 

상단의 예시는 즉시 호출 실행 함수(IIFE)입니다. 다른말로 모듈 패턴이라고도 합니다. 

(function(){})();

같은 형식의 함수인데 기본 function() 함수에 ()을 붙여 함수를 즉시 실행해 버리는 것이 특징입니다.

이구문이 많은 라이브러리를 만들때 기본입니다. 또한, 그만큼 가장 널리 쓰이는 디자인 패턴입니다. 

클로저를 활용하여 모듈 패턴을 만들어 보겠습니다. 

다음은 좋은 디자인 패턴 예시가 있어 올려봅니다.

나중의 모듈패턴을 활용해서 더 좋은 라이브러리형태 모듈을 관리하는 방법에대해서 올려보고싶어지네요 .

다음 JS 패턴은 모듈패턴과 싱글톤 패턴을 비교를 하면서 진행을 하겠습니다.