[JS] 렉시컬 스코프(Lexical Scope)란 무엇일까?

 

 

 

 

 

🌈 자바스크립트 렉시컬 스코프(Lexical Scope) 정리

렉시컬 스코프(Lexical Scope)는 클로저(Closure)를 이해하기 위해 알아두어야 할 개념이다.  

 

 

 

 

👨‍💻 렉시컬 스코프(Lexical Scope)

렉시컬 스코프의 정의는 함수 또는 변수의 스코프를 결정하는 방식이다.

다른 말로는 함수의 호출위치가 아닌, 선언된 위치에 따라 스코프가 결정되는 것이라고 할 수 있다

 

즉, 함수의 선언 위치에 따라 상위 스코프를 결정한다는 뜻이며 정적 스코프(Static scope)라 부르기도 하다.

 

 

 

 

🙋‍♂️ 예제로 알아보기

아래 예제는 x의 값을 콘솔로 출력하는 코드이다.

let x = 1;

const first = (() => {
  let x = 10;
  second();
})

const second = (() => {
  console.log(x);
})

first();
second();

 

얼핏 보면 first 함수 내에서 x에 10을 할당하였기 때문에 콘솔에 10과 1이 출력될 것 같이 보인다.

하지만 실제 출력 값은 전역에 있는 x의 값인 1이 두 번 출력된다.

 

이러한 결과의 이유는 실행 단계에서 코드들의 스코프를 결정하기 때문이다.

◽ global 범위에 있는 변수 x

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

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

 

즉, 위 예제에서 가장 중요한 것은 second( ) 함수의 상위 스코프가 무엇인지에 따라 출력값이 결정된다는 것이다.

 

다시 한번 말하자면, 자바스크립트는 렉시컬 스코프를 따르기 때문에 함수를 선언한 시점에 상위 스코프가 결정된다.

=> 함수의 호출 위치는 중요하지 않으며, 스코프 결정에 영향을 주지 않는다.

=> first 함수 안에서 second가 호출된 것과 상관없이 second는 global 범위에 선언되어 있으므로, 

     global 범위에 있는 변수 x의 값(=1)이 두 번 출력된 것이다.

 

 

 

 

❓ 함수의 호출로 인해 상위 스코프가 결정된다면 

함수의 선언 위치가 아니라 호출 위치에 따라 상위 스코프가 정해지는 것을 Dynamic Scope라고 한다.

 

예제에서 렉시컬 스코프가 아닌 다이나믹 스코프를 따른다면, second의 상위 스코프는 자신을 호출한 함수 first와 전역(global)을 가리키게 되어 함수 first를 호출하여 console.log()를 출력했을 때 x의 결과는 10이 출력될 것이다.