JavaScript 실행 환경에서 global에 새로운 변수를 등록할 때는 또 다른 제3의 스크립트가 등록한 변수와의 있을지 모를 충돌을 피하려는 노력의 하나로 지극히 제한되게 그 사용을 최소화하도록 권장하고 있다. JavaScript의 기본 문법에는 Module을 구현하는 기능을 갖추고 있지 않아서 (ECMAScript 6th Edition, Harmony에선 Module System이 추가될 전망), 이를 비슷하게나마 구현하기 위한 여러 패턴이 소개됐으며 그 중 가장 널리 쓰이는 패턴이 바로 Rrevealing Module Pattern이다.

아래는 개인적으로 이 패턴에다 IIFE를 더 해서 쓰고 있는 snippet.

;(function(global, doc, nameSpace, undefined) {
  'use strict';
 
  var privateVar = 1;
  var privateMethod = function(args) {
 
  };
 
  nameSpace.publicMethod = function(args) {
 
  };
 
  global.nameSpace = nameSpace;
}(this, this.document, this.nameSpace || {}));

JavaScript의 function scope와 closures 덕분에 function 안에 선언된 methods나 variables는 기본적으로 외부에 노출되지 않어서, 그 안의 또 다른 function 이외엔 접근할 수 없도록 차단되어 있는데, 그 중 원하는 것만 꼭 집어서 global에 하나로 공개된 자기만의 namespace가 가지고 있는 property에다 갖다 붙여준다. 이렇게 하면 global 환경에 공개된 기존의 variables와 methods 이름과의 충돌을 최소화할 수 있다.

맨 앞에 희한하게 붙어 있는 세미콜론(;)은 JavaScript 로딩 속도를 최소화하려고 압축해서 다른 스크립트 파일과 하나로 합치는 과정에서, 만약에 다른 스크립트 파일에 있는 마지막 statement 끝에 세미콜론이 빠져있을 경우, 합치는 과정에서 IIFE가 함수 arguments로 오인되는 일을 미리 방지하기 위한 것인데, 이와 관련된 자세한 내용의 글. – IIFE Leading semicolon

남의 밭에서 신발 끈 묶을 땐 항상 조심스럽게.

아래 코드를 이해하려면 JavaScript 만의 특성이 가미된 scope과 closures 이해하고 있어야 한다.

function add (x) {
  return function (y) {
    return x + y;
  };
}
var add5 = add(5);
var no8 = add5(3);
alert(no8); // Returns 8 

JavaScript를 좀 더 깊게 이해하고 좋은 코드를 짜기 위해서는 꼭 알고 있어야 할 부분이지만, 처음 접하는 사람들에겐 난해하기 마련인데, 마침 Robert씨가 알기 쉽게 풀어서 설명해 놓은 글을 올려놓았다.

더불어서, 위 소개 글에서도 잘 설명되어 있는 JavaScript Module Pattern을 약간 변형시킨 것으로, 스크립트 사용 용법이 좀 더 일관되고 패턴 속의 어떤 함수와 변수가 공개적으로 접근 가능한지를 훨씬 명확하게 보여주는 Revealing Module Pattern도 참고할 만하다. 이 패턴은 원한다면 실제 private 함수를 좀 더 명확한 이름을 지정해 놓고 공개해서 되돌려줄 수도 있는 장점이 있다.