자바스크립트 모듈 패턴 :: 마이구미

이번 글에서는 모듈 패턴을 알아볼 것이다.

이전 즉시실행함수에 대한 글을 살펴보고 오면 좋다.

이전 글 내용에서 조금 더 들어간 내용이다.

모듈패턴이란 로직을 캡슐화하고 전역 공간의 남발을 방지하는 훌륭한 기법이다.

(function() {
   var a = 1,
       b = 2;
}());

자바스크립트에서는 위와 같이 익명함수와 즉시실행함수가 있기 때문에 가능하다.

익명함수 내부의 변수들은 지역변수가 되므로 외부에서 접근할 수가 없지만, 익명함수 내부에서는 전역변수를 이용할 수 있다.

이런 식으로 커지다 보면, 변수에 대한 명확성이 떨어지게 된다.

또한 당연히 전역변수를 사용 시에는 지역변수 접근보다 시간이 더 걸린다.

이 문제를 해결하기 위한 방법이 이전 글에서도 살짝 언급했었다.

(function($) {
    console.log($);
}(jQuery));

전역변수 jQuery를 넘겨 익명함수 내부에서 사용함으로써 전역변수에 대한 명확성이 높아지고,

전역 변수 탐색시간도 줄어들게 된다.

이번에는 전역변수를 확장하는 경우를 보자.

(function($, exports) {
    exports.Foo = 'wem';
}(jQuery, window));

위와 같이 사용 시 window를 익명함수 내부에서 exports로 설정함으로써 명확성이 높아졌다.

이런 식으로 활용하면 코드가 깔끔해보인다.

이번에는 모듈패턴을 활용해서 public, private 접근을 구현해보자.

var info = {first : 'lee', name : 'junghyun', sns:'mygumi.tistory.com'};

        var fn = (function(info) {
            var fullname = info.first + ' ' + info.name,
                url = info.sns,
                title = 'title';

            var getUrl = function () {
                return url;
            };

            var getName = function() {
                return fullname;
            };

            return {
                name : getName,
                url : getUrl,
                title : title
            };

        })(info);

        console.log(fn.fullname); // undefined
        console.log(fn.name());   // lee junghyun
        console.log(fn.title);    // title

전역 변수인 info 변수를 fn 함수의 인자를 넘겨 내부에서 지역 변수로써 이용했다.

return 부분에서 private 변수들은 함수를 통해 public 변수는 변수를 return 함으로써 접근을 제어했다.

현재 위의 fn 함수 내부에서는 fullname, url 변수가 private로 title 변수는 public으로 구현했다.

그리하여 private 변수들은 바로 접근할 수 없으므로 undefined가 뜬다.

직접 console.log를 통해 확인해보면 이해가 갈 것이다.

모듈패턴을 사용하여 직접 public, private을 구현하였다.

중요한 내용이다.

자바스크립트는 자바처럼 public, private를 직접 정의해줄 수 없기 때문에 구현을 통해 목적에 따라 잘 정의하길 바란다.

참고한 자료

http://insanehong.kr/post/front-end-developer-interview-javascript/

참고한 자바스크립트 책

javascript web applications