자바스크립트 - 렉시컬 스코프(Lexical Scope)

 

들어가기에 앞서,

Closure(클로져)를 이해하기 위해서는 반드시 렉시컬 스코프(Lexical Scope)를 이해해야 한다.

 

렉시컬 스코프란(Lexical Scope)란?

함수를 어디서 호출하는지가 아니라 어디에 선언하였는지에 따라 결정되는 것을 말한다.

즉, 함수를 어디서 선언하였는지에 따라 상위 스코프를 결정한다는 뜻이며, 가장 중요한 점은 함수의 호출이 아니라 함수의 선언에 따라 결정된다는 점이다.

다른 말로, 정적 스코프(Static scope)라 부르기도 하다.

아래의 예시 코드가 어떻게 동작할지 생각해보자.

var x = 1; // global

function first() {
  var x = 10;
  second();
}

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

first(); // ?
second(); // ?

필자는 당연히 출력 값으로 10 1 출력될 줄 알았다.

하지만 실제 결과에서는 전역에 있는 변수 x의 값 1이 두 번 출력되었다.

그 이유는?

자바스크립트에서는 위와 같은 코드를 작성할 때, 이미 실행 단계에서 코드들의 스코프를 결정한다.

- global 범위에 있는 변수 x

- first() 함수 안에 있는 변수 x

- second() 함수 안에 있는 변수 x

 

위 예제의 실행 결과는 함수 second()의 상위 스코프가 무엇인지에 따라 결정된다.

자바스크립트는 렉시컬 스코프(Lexical Scope)를 따르므로 함수를 선언한 시점에 상위 스코프가 결정된다.

즉, 이 말은 함수를 어디에서 호출하였는지는 스코프 결정에 아무런 의미를 주지 않는다는 말이다.

그렇기 때문에, second() 함수가 first() 함수 안에서 호출된 것과 상관없이 second() 함수는 global 범위에 선언되어 있으므로, global 범위에 있는 변수 x의 값 1이 두 번 출력된 것이다.

어떻게 global 변수를 인식하는지를 알려면 스코프 체인 참고!

자바스크립트 - 스코프 체인(scope chain)란?

 

만약 함수의 호출로 상위 스코프가 결정된다면? 

함수의 호출에 따라 상위 스코프가 정해지는 것을 Dynamic Scope라고도 합니다. Perl, Bash Shell 등에서 Dynamic Scope를 따른다.

함수 second()의 상위 스코프는 자신을 호출한 함수 first()와 전역(global)을 가리키게 되어 함수 first()를 호출하여 console.log()를 출력했을 때 x의 결과는 10이 출력될 것이다.

하지만 결과는 전역 변수 x의 값 1이 두 번 출력되었다.

이는 함수의 호출이 아니라 함수의 선언에 따라 상위 스코프가 결정된다는 것을 꼭 기억해야 한다.