[생활코딩] 자바스크립트 유효 범위

📕 정의

전역 VS 지역

유효 범위는 전역 유효 범위와 지역 유효 범위 두 가지로 나누어진다. 영어로는 scope.

전역 변수는 함수 밖에서 만들어진 변수를 뜻하며 어플리케이션 전체에서 접근이 가능하다.
지역 변수는 함수 안에서 만들어진 변수를 뜻하며 해당 함수 안에서만 접근이 가능하다.

바로 예시를 본다.

var vscope = 'global'; // 함수 밖에서 만들어졌으니까 전역 변수
function fscope(){
    var vscope = 'local'; // 함수 안에서 만들어졌으니까 지역 변수
    alert('함수안 '+vscope); // 지역 변수 local 출력
}
fscope();
alert('함수밖 '+vscope); // 전역 변수 global 출력

대충 주석으로 설명이 다 됐을 것 같다. 정의를 다시 읽어보면 이해가 될 것이다.

전역 변수의 사용은 최대한 피하자.

var를 사용한 전역 변수는 협업할 때 혼란을 줄 수 있다

전역 변수로 인해서 함수 안에 있는 값이 바뀐다면 혼자 코딩할때도 뭐가 문제인지 엄청 헷갈릴텐데, 다른 사람들과 일할 때 그런 문제가 발생하면 해결하기가 어려워진다.

웬만하면 로컬변수를 만들어서 쓰자.

📌 유효범위의 사용

유효범위의 효용

var가 붙느냐 안붙느냐의 차이가 있다. 변수로써 선언을 하느냐 안하느냐 인데, 예시를 보면서 이해를 해보자.

function a (){
    var i = 0;
}
for(var i = 0; i < 5; i++){
    a();
    document.write(i); //01234
}

a 함수 안에서는 변수 i = 0 을 선언했는데 함수 안에서 변수를 선언하면 지역변수랬다. 지역 변수는 함수 안에서만 유효하다. 근데 우리가 출력할 i 는 a 함수 밖의 변수니까 for 반복문에서 선언된 전역 변수 i 가 출력되는 것이다.

근데 만약에 var 가 안 붙으면 어떻게 될까?

var가 붙지 않으면 변수를 선언하는게 아니고 전역 변수의 값을 바꾸게 된다. For 반복문에서 선언한 전역 변수 i 의 값을 항상 0 으로 바꾸게 되는 것이다. 그러면 반복되면서 i 값이 올라가더라도 a 함수가 실행되기 때문에 계속 0을 출력하고 i = 0 < 5 가 만족되면서 무한 루프에 빠진다. 왜냐면 i++ 로 i 의 값을 올려도 a 함수 실행되면서 다시 0으로 만드니깐.

전역 변수의 사용

굳이 쓰겠다면 전역 변수를 안전하게 쓰는 방법이 있다. 첫번째로는 객체화 시키는 것이다. 선언된 전역 변수를 객체로 만들고 객체의 속성을 이용해서 변수를 관리한다면 혼란이 줄어들 수 있다. 대충 이런식이다.

example = {}
example.direction = {
    'left' : null,
    'right' : null
}

두번째 방법은 해당 로직을 모듈화 시키는 것이다. 이게 제일 선호되는 방법인데 전역변수 처럼 선언해놓고 그걸 익명함수로 감싸서 지역 변수로 만들어버리는거다.

(function(){
    var example = {}
    example.direction = {
        'left' : null,
        'right' : null
    }
}())

이렇게 되면 전역 변수의 단점을 어느정도 커버할 수 있다.

📌 정적 유효 범위

바로 예시를 보면서 이해해 보자.

var i = 5;
 
function a(){
    var i = 10;
    b();
}
 
function b(){
    document.write(i);
}
 
a();

일단 전역 변수 i = 5 이고, a 함수를 실행하면 지역 변수 i = 10이 선언되고 b 함수를 실행한다.
b 함수에서는 i 를 출력하도록 한다. 그러면 여기에서 i 는 어떤 값이 유효할까?

나는 처음에 10 인줄 알았다. 왜냐면 b가 실행되는 지역에서 지역변수 i = 10 이 선언됐으니까.
정답은 5 이다. 자바스크립트에서는 함수가 실행되는 시점이 아닌 선언된 시점에서의 유효범위를 갖는다. 조금 헷갈리긴 하는데 함수가 정의될 때의 전역 변수를 생각해보면 해결할 수 있다.

댓글에서 예시를 얻었다.
이 두 가지 경우에서 b의 값을 추적해 보면 이해하는데 도움이 될 것이다.

📌 마무리

현재 자바스크립트에서 var는 거의 쓰이지 않는걸로 알고있다. 요즘에는 let을 쓴다.

var 는 이번 포스팅에서 확인할 수 있듯이 여러가지 단점들이 존재한다.

그러나 이 시점에서 var 를 공부하는 이유는 오랜시간동안 var가 쓰여왔기 때문에 이미 많은 프로그램들이 그것들을 이해하기 위해서는 var를 알아야 한다. 또한, 자바스크립트에서 불편한 var을 보완하여 let이 나오게 된 배경과 기존 자바스크립트에 대해서 생각해 볼 수 있다.