렉시컬 스코프(Lexical Scope)

재찬님께서 디코방에 올려주신 설명을 보다 렉시컬 스코프에 대해 정확히 인지를 하지 못하고 있다는 것을 깨닫고

렉시컬 스코프에 대해 알아보았습니다.

 

(참고자료: https://poiemaweb.com/js-scope)

Scope | PoiemaWeb

스코프에 대한 개념은 JavaScript를 이미 많이 접하셨기 때문에 자세한 내용은 언급하지 않도록 하겠습니다.

 

렉시컬 스코프에 대해 알아보기 전에, 예시 코드를 보겠습니다.

var x = 1;

function foo() {
  var x = 10;
  bar();
}

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

foo(); // ?
bar(); // ?

작성된 코드에서 foo 함수와 bar 함수를 호출할 경우, 어떤 값을 호출되는지 생각해보아야 합니다.

 

마지막 bar 함수의 출력값은 분명 1이 될 것입니다.

하지만 foo 함수를 호출할 경우, 출력되는 bar 함수의 결과값이 무엇인지 헷갈릴 수 있습니다.

 

bar 함수는 전역에서 선언되었기 때문에 전역 변수 x = 1을 가져올지, 아니면 foo 함수 안에서 bar 함수가 호출되었으니까, foo 함수 안에 있는 지역변수 x = 10 값을 가져올지 헷갈립니다.

 

이 때 등장하는 개념이 렉시컬 스코프 입니다.

위 코드의 실행결과는, bar 함수의 상위 스코프가 무엇인지에 따라 결정이 됩니다.

 

이때 bar 함수의 상위 스코프는 무엇일까요?

 

상위 스코프를 결정하는 방법은 두 가지 패턴이 존재합니다.

첫 번째. 함수를 어디서 '호출' 하는가

두 번째. 함수를 어디서 '선언' 하는가

 

첫 번째 방식을 동적 스코프(Dynamic scope)라 하고, 두 번째 방식을 렉시컬 스코프(Lexical scope) 또는 정적 스코프(Static scope)라고 합니다.

 

자바스크립트를 비롯한 대부분의 프로그래밍 언어는 렉시컬 스코프 즉 함수를 어디서 '선언' 하였는지에 따라 결정됩니다.

(함수를 어디에서 호출하였는지는 스코프 결정에 아무런 의미 또는 영향 X)

 

그렇다면 foo 함수내에서 호출되는 bar 함수는 무엇을 출력하게 될까요?

 

예시 코드에서 bar 함수는 전역에서 선언되었습니다.

이때 자바스크립트는 함수를 어디서 '선언'하는지에 따라 상위스코프가 결정되는 렉시컬 스코프 이므로,

bar 함수가 선언된 전역(글로벌)이 상위스코프가 됩니다.

 

따라서, 예시 코드에서 foo(), bar() 모두 전역 변수 x인 1을 출력합니다.

 

# 렉시컬 환경이란?

코드가 어디서 실행되며 주변에 어떤 코드가 있는지"를 렉시컬 환경이라고 합니다.

코드의 문맥은 렉시컬 환경으로 이루어집니다. 이를 구현한 것이 "실행 컨텍스트"이며,

모든 코드는 실행 컨텍스트에서 평가되고 실행됩니다.