javascript - Module 패턴(전역스코프를 지켜라)

작성일 | Edited on | In | 댓글:

들어가기

웹 프로젝트를 하다보면 공통적으로 사용할 유틸리티 등을 common.js 와 같이 분리하여 개발할 필요가 생긴다. 이때 고려할점은 자바스크립트의 전역 스코프의 변수명 관리가 힘들다는 것이다.

예를 들어 common1.js와 common2.js 두개를 동시에 참조하여 사용파는 페이지가 있다고 가정했을때,

common1.js 내부

1
2
3
4

var commonObj1 = {};

var someUtil = {};

common2.js 내부

1
2
3
4

var commonObj2 = "test";

var someUtil = {};

위처럼 전역변수의 명이 겹쳐지는 상황이 발생할 수도 있다. 만약 수십개의 js 파일에 각각 수십개의 변수명이 선언된다면... 아무리 개발룰을 통일해서 잘 개발한다 하더라도 전역스코프에 변수명이 겹쳐지는 위험성을 피할수는 없다. Module 패턴을 이용하면 위와 같은 전역스코프의 오염을 어느정도 줄일수 있다.

Module 패턴

javascript에서 java와 같은 고급언어의 클래스의 캡슐레이션을 구현하기 위해 사용되는 패턴이다. 말 그대로 자바스크립트 코드를 모듈화 하여 사용한다.

기본구조

1
2
3
4
5
6
7
8
9
var someObj = (function(){
  
  // private 변수들과 함수들 위치

  return {
     //public 변수들과 함수들 선언
  }

})();

모듈패턴은 자바스크립트의 클로저와 즉시실행함수를 이용하여 구현된다. 즉시실행함수를 통해 위 코드는 로드가 되는 순간 바로 동작하여 1개의 객채를 리턴하여 someObj에 할당하게 된다. 즉 someObj는 java의 static 클래스와 비슷해진다.

구체적으로 예들 들면 아래와 같다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
var obj1 = (function(){

  // private 변수들 함수
  var _age = 12; // java로 따지면 static 변수가 된다.

  return {

    getAge : function(){
      return _age;
    },
    setAge : function(age){
      _age = age
    },
    getOld : function(){
      _age++;
    },
    getYoung : function(){
      _age--;
    },
  }

})();

console.log(obj1.getAge());

obj1.setAge(20)
console.log(obj1.getAge());

obj1.getOld()
console.log(obj1.getAge());

obj1.getYoung()
console.log(obj1.getAge());

위 코드의 실행결과

모듈 패턴을 사용하여 자바스크립트의 소스코드를 모듈화 하고, 전역스코프를 어느정도 깨끗하게 유지할수 있다. 하지만 궁극적으로 모듈명, 즉 위의 obj1의 이름의 충돌 자체는 막을수 없다. 이를 위해서 어느정도 개발규약이 필요하다.

모듈명의 충돌을 막기위해, 모듈명은 js파일명과 동일하게 하여 최대한 유니크성을 지켜야 한다.

마무리

자바스크립트를 조금 보니 별별 패턴이 다있다. 아마도 위 모듈명이 충돌되는 것도 방지하는 무언가 이미 있지 않을까 생각된다. 아 공부를 하면 할수록 아는것 보다 모르는게 많아지는 느낌이다.

참고자료

https://kkd927.github.io/general/web/javascript/2017/04/12/4-JavaScript-Design-Patterns-You-Should-Know.html