유효범위(Scope)

유효범위는 변수의 유효범위를 의미한다. 함수 밖에서 변수를 선언하면 그 변수는 '전역변수(Global variable)'이 되고, 함수 내에서 변수를 선언하면 그 변수는 '지역변수(Local variable)'이 된다.

 

아래의 예제를 보면서 이해해보자.

 

▲ 함수밖에서 변수 vscope을 global로 선언하였다. 따라서  변수 vscope은 '전역변수'가 되고 함수를 호출하면 전역변수인 vscope의 값이 출력된다.

 

 

▲ 첫 줄에서 vscope = global로 변수선언을 하였다. 그리고 함수를 선언하면서 내부에서 같은 이름의 변수 vscope의 값으로 local을 선언하였다. 같은 이름의 변수가 각각 다른 값으로 선언된 것이다. 

함수 fscope을 실행하면 함수를 실행한 것이므로 함수 내에서 선언된 변수값인 local이 출력된다.

하지만 함수가 아닌 단순 변수 vscope을 호출하면 함수 외부에 있는 전역변수 vscope의 값인 global이 출력되는 것이다.

 

이름에서도 알 수 있듯이 전역변수는 모든 지역에 영향을 미치는 변수이며, 지역변수는 그 지역에서만 영향을 미치는 변수인 것이다.

 

 

 

그렇다면 아래 예제의 출력값은 무엇일까?

 ▲ 바로 이전 예제의 함수 안 변수 앞에 var를 제거하였다. 출력값은 어떻게 될까? 둘 다 local값이 출력된다.

앞에서 var을 뺐을 뿐인데 값이 달라진 것이다. 왜냐하면 var를 사용하지 않은 지역변수는 전역변수가 되기 때문이다.

따라서 함수안의 vscope 선언에 의해서 vscope = 'local'이 전역변수가 되어버린 것이다.

이처럼 var을 쓰는 것과 쓰지 않는 것의 차이를 이해해야 한다.

 

 

위의 예제를 보다시피 변수가 꼬이는 경우가 생긴다. 예제는 간단한 코드이기 때문에 체감이 되지 않지만, 코드가 길어지고 복잡해진 상황에서 변수가 꼬이게 된다면 디버깅하기도 정말 힘들 것이다.

 

따라서 전역변수는 사용하지 않는 것이 좋다. 여러가지 이유로 그 값이 변경될 수 있기 때문이다. 함수 안에서 전역변수를 사용하고 있는데, 누군가에 의해서 전역변수의 값이 달라졌다면 어떻게 될까? 함수의 동작도 달라지게 된다. 이것은 버그의 원인이 된다. 또한 함수를 다른 에플리케이션에 이식하는데도 어려움을 초래한다. 함수의 핵심은 로직의 재활용이라는 점을 상기하자. 변수를 선언할 때는 꼭 var을 붙이는 것을 습관화해야 한다. 전역변수를 사용해야 하는 경우라면 그것을 사용하는 이유를 명확히 알고 있을 때 사용하도록 하자.

 

 

 

유효범위의 효용에 대해 조금 더 알아보자.

 

-- 지역변수의 사용

▲ 실행결과 01234 출력

 

 

-- 전역변수의 사용

▲ 함수안에 있는 변수 앞에 var 없이 선언함으로써 전역변수가 되버린다. 따라서 for문의 변수 i 는 계속 0 이기 때문에 for문이 무한반복 되어 browser가 결과적으로 틩기게 될 것이다.

 

 

 

<정적 유효범위(Static scoping) 혹은 렉시컬(lexical scoping)>

 

 

▲ 과연 마지막줄에 함수 a를 실행시켰을 때 결과값은 5일까 10일까?

 

실행결과는 5이다. why? 함수a에서 함수b를 호출하여 자신의 함수안에 b를 소속시키는 것처럼 보여 실행결과가 10이지 않을까라고 생각할 수 있다. 하지만 JavaScript는 함수가 선언된 시점에 유효범위를 갖는다. 그렇기 때문에 함수 b가 선언된 그 순간 함수b안에는 지역변수가 없으므로 전역변수를 찾게되고 결과적으로 함수b의 변수 i는 전역변수값인 5가 되는 것이다.