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

들어가기

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

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

common1.js 내부

var commonObj1 = {};

var someUtil = {};

common2.js 내부

var commonObj2 = "test";

var someUtil = {};

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

---

Module 패턴

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

기본구조

var someObj = (function(){
  
  // private 변수들과 함수들 위치

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

})();

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

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

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