[ Javascript ] 글로벌 변수 선언 방법과 차이

글로벌 변수의 선언 방법

• 글로벌 스코프에서 var키워드를 써서 변수 선언
• 상위 스코프에서 같은 변수명으로 선언되지 않고 var키워드 없이 바로 변수 사용하는 경우
• window객체가 재선언되지 않은 스코프에서 window.global과 같이 속성 추가
• window객체가 재선언되지 않은 스코프에서 window["global"]과 같이 속성 추가

위 방법들은 각 조건에 따라 글로벌 변수가 선언된다.

<script>
    // 글로벌 스프에서 글로벌 변수 정의
    var myGlobal = "global";

    // 하위 스코프에서 var키워드 없이 글로벌 변수 정의
    (function() {
        myGlobal2 = "global";
    }());

    // window객체를 재정의
    (function() {
        var window = {
            popup: function() {
                window.open("http://shiro21.tistory.com");
            },
            alert: function() {
                alert("I'm not the true alert");
            },
            open: function(url) {
                alert("I know where you are going ..." + url);
            }
        };

        window.alert();
        window.popup();
    }());
</script>

window객체를 재정의한 부분에서는 window객체를 변조하여 window.open()함수를 원래의 팝업창을 띄우는 용도가 아닌 다른 용도로 사용하는 예이다. 이렇게 하면 다른 개발자들과 협업하면서 개발한 소스코드가 서로 충돌날 수도 있으니, window라는 변수명은 사용하지 말아야한다.

 

글로벌 변수 선언 방법의 차이

각각의 글로벌 변수 선언 방법에 어떤 차이가 있는지 봤을때 가장 대표적으로 다른점은 변수가 선언되는 시기다.

 

글로벌 스코프에 var키워드를 써서 정의

<script>
    console.log("1: " + varExists + " , " + window.hasOwnProperty("varExists")); // undefined , true
    var varExists = "Define a glbal variable with var keyword";
    console.log("2: " + varExists); // Define a glbal variable with var keyword
</script>

첫번째 결과는 undefined가 나오고, 두번째 결과는 String값이 나타난다. 그리고 글로벌 객체인 window는 이미 var키워드로 정의한 변수를 가지고 있음을 알 수 있다.

 

var키워드 없이 글로벌 변수 정의

<script>
    console.log("Exists?: " + window.hasOwnProperty("noVar")); // Exists?: false
    console.log("1: " + noVar);
    noVar = "Define a global variable without var keyword";
    console.log("2: " + noVar);
</script>

이렇게 변수를 var키워드 없이 사용하면, 실제로 noVar = "...";구문이 실행되기 전에는 변수가 window의 속성으로 정의되어 있지 않다.

따라서 noVar변수에 접근하려고 하면 정의되지 않은 변수라는 레퍼런스 에러가 일어난다. 이것은 var키워드로 정의한 변수는 최초 소스의 파싱 단계에서 미리 글로벌 변수로 정의되어 undefined로 값이 설정되지만, var키워드를 이용하지 않으면 해당 구문이 직접 실행되는 순간에 글로벌 변수를 window객체의 속성으로 추가하기 때문이다.

 

---

추가내용

 

if구문 안에 변수를 정의하는 예

<script>
    function optimizedFunc(flag) {
        if(flag) {
            var lotsOfVariables1, lotsOfVariables2, lotsOfVariables3;
            console.log("1: " + lessVariables);
        } else {
            var lessVariables;
            console.log("2: " + lotsOfVariables1);
        }
    }
    optimizedFunc(true);
    optimizedFunc(false);
</script>

여기서 알 수 있는 점은 함수의 소스코드인 code전체를 기준으로 변수를 정의하기 때문에 "var키워드로 정의하는 변수의 위치는 의미가 없고, 변수의 초기화 위치만 의미가 있다"는 점이다. 따라서 코드 중간이나 if등으로 분기할 때 var키워드로 변수를 따로 구분하여 정의하는 것은 성능에 아무런 영향을 미치지 않는다.

위 함수에서 보면 if문의 첫 번째 분기에는 여러 변수가 정의되어 있고, 두 번째 분기에서는 변수를 조금 사용하기 때문에, if문의 분기별로 따로 변수를 정의하면 메모리나 성능을 효율적으로 사용할 수 있을 것 같은 느낌이지만, '실행 환경'이라 하면 새로운 스코프가 생성되는 함수로 들어갈 때 해당하고, if구문은 해당 사항이 없다.

따라서 optimizedFunc()함수 안으로 들어갔을 때, 이미 첫 번째 분기의 여러 변수와 두 번째 분기의 적은 변수들이 모두 정의되기 때문에 내부적으로 메모리의 효율은 줄어들지 않는다.

 

자바스크립트 문법 검사기 JSLint 바로가기

 

변수는 함수가 처음 시작할 때, 하나의 var키워드 아래에 전부 다 묶어서 정의하라