[ Javascript ] 글로벌 변수 최소화하기

글로벌 변수를 최소화하는 방법

• 클로저를 이용하는 방법
• 모듈 / 네임스페이스 패턴을 이용하는 방법

 

클로저를 이용하는 방법

<script>
    (function() {
        var localVariable = "Not Global";
    }());
</script>

위처럼 클로저를 사용해 간단하게 로컬 변수로 바꿔줄 수 있다.

 

모듈 / 네임스페이스 패턴을 이용하는 방법

<script>
    var myModule = (function() {
        var localVariable = "local variable";

        return {
            show: function() {
                alert(localVariable);
            }
        }
    }());

    myModule.show();
</script>

myModule이라는 변수 자체는 글로벌 변수다. 하지만 myModule이외의 다른 변수들은 모두 즉시 호출 함수 안에서 사용하여 글로벌 변수가 아니다. myModule.show();를 통해 간접적으로 내부 함수의 로컬 변수들에 접근하고 사용할 수 있다.

 

즉시 호출 함수로 모듈을 생성하는 예

<script>
    (function() {
        var localVariable = "local variable";

        window.myModule = {
            show: function() {
                alert(localVariable);
            }
        };
    }(window));
    myModule.show();
</script>

위 두 코드는 같은 기능을 수행한다. 이렇게 글로벌 변수를 최소화함으로써 서로 다른 자바스크립트 코드간의 충돌을 최소화하고자 하는 것이 모듈 / 네임스페이스 패턴이다.

 

글로벌 변수의 사용을 최소화하기 위한 방법 기준

• DOM에 자바스크립트 코드를 넣고 변수에 접근해야 한다. :: 모듈방식
• 다른 개발자와 상호작용하는 코드를 만든다. :: 모듈방식
• 자바스크립트 라이브러리를 만들고 싶다. :: 모듈방식
• 외부에서 접근할 일이 없다. :: 클로저 방식
• 잘 모르겠다. :: 클로저 방식

위 기준에 따르면 대부분 클로저를 사용해서 글로벌 변수 없이 전체를 로컬 변수로 만들어 사용하는 것이 좋다. 특히 자바스크립트 개발자 커뮤니티에서는 글로벌 변수의 사용 자체를 막기 위해, 그리고 DOM과 자바스크립트의 역할을 명확하게 구분하기 위해 위 기준 중 1번 DOM에 자바스크립트 코드를 넣는 것을 반대하고 있기도 하다.