javascript 글로벌 변수에 대해서

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

작성할수 있는 경우를 보자.

가장 대표적인 글로벌 변수의 예

<script>

var global = "test";

</script>

경량의 웹사이트에서는 이렇게 쓰지만 복잡한 자바스크립트에서는 자제하는 것이 좋다.

자바스크립트의 특징 중 하나는 for 루프 안에서 글로벌 변수를 만들 수 있다는 것이다.

<script>

for(var i = 0; i < 10; i++) {

var global = "test";

}

</script>

위와같이 선언했다면 global은 전역변수이다. 다른언어에서는 for문안에 지역적인 변수이지만 자바스크립트에서는 for문안에서 scope를 생성하지 않는다. 더 신기한것은 i까지도 글로벌 변수라는 것이다. 그래서 이런식으로 쓸때는 충돌에 굉장히 조심해야 한다.

다음도 헷갈리기 쉬운 문제이다.

 

<script>

    function addOneToTen(){ 

        sum = 0;

        for(i = 1; i < 11; i++) {

            sum = sum + i;

        }

        return sum;

    }

    

    sum = 0;

    

    for(i = 0; i < 10; i++) {

        sum = sum + addOneToTen();

    }

    

    console.log(sum);

    

</script>

콘솔에 뭐라고 찍힐것 같은가? 

얼핏 보기엔 1부터 10까지 더한것을 10번 반복하여 550이 되는것 처럼 보인다. 하지만 결과값은 놀랍게도 55이다.

잘 보면 변수를 선언할때 var로 선언하지 않고 있다. 그럼 선언되지 않은 변수여서 에러가 날까?

아니다. var 키워드를 쓰지 않으면 현재보다 상위의 스코프를 탐색하면서 그 변수가 선언이 되어 있는지 계속 검사한다. 올라가다가 글로벌 영역까지 도달해도 없다면 이것은 글로벌 변수라고 자동으로 정의해 준다. 

위의 예제에서 sum과 i는 선언되어 있지 않다. 그러면 글로별 변수이다. 맞다.

위의 포문은 함수내의 포문이므로 밑의 포문부터 실행된다. 일단 sum은 0이고 i는 0이다. i가 1이 되면서 addOneToTen()함수가 실행된다. 자연스럽게 1부터 10까지 더해서 sum에 55가 들어간다. return sum을 해줘서 밖으로 던져줬는데 여기서 i가 글로벌 변수이다. 그래서 i값이 11이 된 상태로 튀어나오게 된다. 결국 밑에 쪽 for문은 처음 addOneToTen()이 호출되는 순간 i가 11이 되어버려서 반복문을 돌지 못한다. 결국 연산은 한번만 이뤄지기 때문에 55가 나오게 되는 것이다.

그렇다면 var를 쓰지 않으면 무조건 글로벌 변수인가?

그럴때도 있고 아닐 때도 있다.

<script>

var getVariable = "global";

    

    (function() {

       var getVariable = "closure function" ;

        insideFunction();

        console.log("2 "+getVariable);

        

        function insideFunction() {

            console.log("1 "+getVariable);

            getVariable = "inside function"

        }

    }());

    

    console.log("3 "+getVariable);

</script> 

출력결과 

1 closure function

2 inside function

3 global

insideFunction 내부에서 getVariable변수를 var없이 쓰고 있다. 즉 var를 안써도 전역변수에 영향을 미치지 않는 경우가 있다는 것을 알 수 있다. 클로저를 통해서 함수안에 함수를 정의했다. 끝에 ()로 실행을 해줘야 뜬다. 저거 안해주면 3 global만 나온다. 

어쨌든 클로저 안에서는 자기들끼리 놀면서 밖의 전역변수에는 닿지 않는것으로 보인다. 과연 그럴까?

다음 예제를 보자. var 선언문 하나가 없다. 

var getVariable = "global";

    

    (function() {

        insideFunction();

        console.log("2 "+getVariable);

        

        function insideFunction() {

            console.log("1 "+getVariable);

            getVariable = "inside function"

        }

    }());

    

    console.log("3 "+getVariable);

출력 결과

1 global 

2 inside function

3 inside function

처음에 insideFunction()내에서 getVariable를 호출하는데 바로 위에도 없다. 그렇다면 글로벌 까지 로켓발사로 뚫고 올라간다. global이라고 선언되어 있으므로 글로벌 변수가 출력된다. 그리고 바로 밑줄에서 inside function 이라고 대입했다. 그럼 위위윗줄에 콘솔창에는 바뀐 변수가 출력되겠다. 그렇다면 맨 마지막은 어떨까? 글로벌에 접근해서 값을 바꿔놓았기 때문에 또 inside function 이 출력이 된다.

결론은? 

var를 안쓰고 변수를 사용했다고해서 무조건 전역변수는 아니라는 것이다.