[ Javascript ] 글로벌 변수 정의하기

글로벌 변수 정의

글로벌 변수는 선언하면 어디서든지 접근할 수 있는 변수이다.

 

글로벌 변수의 예

<script>
	var myGlobal = "This is a global variable";
</script>

이렇게 별 처리 없이 script안에 var를 쓰면 글로벌 변수가 지정된다.

 

글로벌 변수로 인한 오작동의 예

<script>
    function add() {
    	sum = 0;
        for(i = 0; i < 11; i++) {
        	sum = sum + i;
        }
        return sum;
    }
    
    sum = 0;
    for(i = 0; i < 10; i++) {
    	sum = sum + add();
    }
    
    console.log(sum);
</script>

위 코드에서 add()함수의 sum과 i는 글로벌 변수이다. 즉 add()함수 안에 있는 i와 sum은 글로벌 영역에 있는 변수들을 참조한다.

이는 함수 외부에 있는 루프에도 영향을 미치기 때문에, add()함수가 처음 호출될 때 글로벌 변수인 i의 값은 11이 된다.

따라서 위 로직은 결과적으로 한 번밖에 실행되지 않았기 때문에 550이 아닌 55라는 결과가 출력된다.

 

var를 쓰지않아서 글로벌 변수가 되었다고 생각할 수도 있다.

var키워드를 쓰지 않으면 현재보다 상위의 스코프를 탐색하면서 sum변수가 있는지 검사하는 단계를 반복해서 거치게 된다. 이러한 검사가 글로벌 영역까지 다다라서 그곳에도 변수가 정의되어 있지 않다면, 그때 비로소 글로벌 영역에 변수를 정의한다.

 

var키워드를 사용하지 않는 변수 접근의 예

<script>
    var getVariable = "global";
    (function() {
    	var getVariable = "immediate function";
        insideFunction();
        console.log("2. Immediate function: " + getVariable); // Immediate function: Will I be Global?
        
        function insideFunction() {
        	console.log("1. Inside function: " + getVariable); // Inside function: immediate function
            getVariable = "Will I be Global?";
        }
    }());
    
    console.log("3. Global: " + getVariable); // Global: global
</script>

insideFunction내부에서 getVariable변수를 var키워드 없이 사용하고 있지만, 글로벌 변수 getVariable에 설정한 "global"이 출력되지 않고 클로저 안에서 정의한 "immediate function"값이 출력된다. 

또한, getVariable변수를 설정했지만, 글로벌 변수인 getVariable까지 도달하지 않았다. 따라서 var키워드 없이 변수를 사용하면 글로벌 변수라는 말은 정확하게 보면 특정 상황에서만 맞고 자바스크립트를 활용하는 많은 상황에서는 틀린말이 되는 것을 알수가 있다.