[자바스크립트] 렉시컬 스코프

스코프와  스코프 체인

스코프란, 식별자의 유효 범위를 말한다.
스코프 체인이란, 이 식별자의 유효 범위를 뜻하는 스코프가 계층적으로 연결된 것을 의미한다.

 

함수에서 스코프를 결정하는 방식으로는 동적 스코프와 정적 스코프 방식이 있다.

 

동적 스코프와 정적 스코프의 차이는

    var x = 1;

    function fun1(){
      var x = 2;
      fun2();
    }

    function fun2(){
      console.log(x);
    }

    fun1(); // 결과1 = ?
    fun2(); // 결과2 = ?

에서 결과1, 결과2가 어떤 형태일 지 예측해보면 된다.

 

(1) 2 1 출력

(2) 1 1 출력

2가지 경우로 예측할 수 있을 것이다.

 

실제로 이 스코프에 대해 공부하게 된 계기도 이 코드와 유사한데,
알고리즘 문제를 풀면서 스코프 때문에 의도한 방향과 다르게 함수가 동작했기 때문이었다.

 

동적 스코프와 정적 스코프

 

 

동적 스코프란?

 

함수를 어디서 호출했는지에 따라 함수의 상위 스코프가 결정되는 방식이다.
함수가 호출되는 시점에서 동적으로 상위 스코프를 결정해야 하기 때문에, 동적 스코프라고 부른다.

 

동적 스코프를 위 코드에 적용해보면,

 

결과1의 fun1()을 실행하면서 fun1()의 스코프 체인이 fun1 지역 스코프 - 전역 스코프 의 형태를 가질 것이고,
fun1 내부의 fun2의 스코프 체인이 fun2 지역 스코프 - fun1 지역 스코프 - 전역 스코프 의 형태를 가질 것이다.
그러므로 fun1()의 수행 결과, x=2의 값이 출력이 되며,
결과2의 fun2()의 실행으로 fun2()의 스코프 체인이 fun2 지역 스코프 - 전역 스코프 형태를 가지므로
fun2()의 수행 결과 x=1의 값이 출력된다.

 

즉, 2와 1이 출력된다.

 

이처럼 함수가 어느 위치에서 호출이 되는지에 따라 함수의 스코프가 바뀐다는 것이다.

 

 

정적 스코프란?

 

주로 렉시컬 스코프라고 부른다.
함수 정의가 평가되는 시점에서 상위 스코프가 정적으로 결정되는 방식이다.

 

정적 스코프를 위 코드에 적용해보면,

 

각 함수가 정의된 위치를 기준으로 상위 스코프가 결정되므로,

fun1()의 스코프 체인이 fun1 지역 스코프 - 전역 스코프 로 정해져 있고,
fun2()의 스코프 체인이 fun2 지역 스코프 - 전역 스코프 로 정해져 있다.

 

그러므로
결과1의 fun1()은 x=1의 값이 출력이 되고,
결과2의 fun2() 역시 x=1의 값이 출력이 된다.

 

fun2의 스코프 체인에서 fun1 지역을 찾을 수 없기 때문에,
fun1의 지역 스코프에 존재하는 var x = 2 는 fun2의 결과값에 영향을 줄 수 없다.

 

그래서 자바스크립트는 어떤 스코프 방식을 따르는가?

 

자바스크립트 함수는 렉시컬 스코프를 따른다.
그러므로 자바스크립트 함수의 상위 스코프는 어디서 정의가 되었는지에 따라 결정된다.

 

이 개념을 알고 나면,

    function fun1(){
      console.log(count);
    }

    function fun2(){
      var count = 1;
      fun1();
    }

    fun2() // error : count is not defined

다음과 같은 에러가 발생하는 이유를 이해하게 된다.