실행 컨텍스트 관점에서 렉시컬 스코프에 대해 정리한다.

렉시컬 스코프와 상위 스코프 결정

자바스크립트 엔진은 함수 호출 위치가 아닌 함수 정의 위치에 따라 상위 스코프를 결정하는데, 이것을 렉시컬 스코프라고 한다.

const name = "cabbage";

function foo() {
  const name = "kabbage";
  bar();
}

function bar() {
  console.log(`이름: ${name}`);
}

foo(); // 이름: cabbage
bar(); // 이름: cabbage

foo 함수, bar 함수 모두 전역에서 정의된 전역 함수다.

• 함수의 상위 스코프는 함수 호출 위치가 아니라 함수 정의 위치에 따라 결정되므로 foo 함수와 bar 함수의 상위 스코프는 전역이다.
• bar 함수는 foo 함수 내부에서 호출되었지만 bar 함수의 상위 스코프는 foo 함수가 아니다.
• 함수의 상위 스코프는 함수 정의 위치에 따라 정적으로 결정되고 변경되지 않는다.

여기서 스코프란 실행 컨텍스트의 렉시컬 환경을 의미한다. 실행 컨텍스트는 자신만의 렉시컬 환경을 생성하고 참조한다. 렉시컬 환경 생성 과정에서 렉시컬 환경은 자신이 내부적으로 가지고 있는 '외부 렉시컬 환경에 대한 참조(Outer Lexical Environment Reference)'를 통해 상위 렉시컬 환경과 연결된다. 실행 컨텍스트가 참조하는 렉시컬 환경의 외부 렉시컬 환경에 대한 참조를 통해 상위 렉시컬 환경과 연결된 것이 스코프 체인이다.

"함수의 상위 스코프를 결정한다"는 것은 "렉시컬 환경의 외부 렉시컬 환경에 대한 참조에 저장할 참조값을 결정한다"는 것을 의미한다.

• 렉시컬 환경의 외부 렉시컬 환경에 대한 참조에 저장하는 참조값이 상위 렉시컬 환경에 대한 참조이며, 이것이 상위 스코프가 되기 때문이다.

렉시컬 스코프를 다시 정리하면 다음과 같다.

렉시컬 환경의 외부 렉시컬 환경에 대한 참조에 저장하는 참조값, 즉 상위 스코프에 대한 참조는 함수 정의 평가 시점(함수 실행 컨텍스트 생성 시점)에 함수 정의 환경(위치)에 따라 결정된다. 이것이 렉시컬 스코프다.

함수 객체의 내부 슬롯 [[Environment]]

함수는 자신의 내부 슬롯 [[Environment]]에 자신이 정의된 환경, 즉 상위 스코프의 참조를 저장한다.

위에서 언급한 렉시컬 스코프가 가능하려면 함수는 자신이 정의된 환경(위치), 즉 자신의 상위 스코프를 기억하고 있어야 한다. 때문에 함수는 자신의 내부 슬롯 [[Environment]]를 사용해 상위 스코프의 참조를 저장한다.

• 함수 정의 평가 과정을 통해 함수 객체가 생성된다.
• 함수 객체 생성 과정에서 함수는 자신이 정의된 환경에 의해 결정된 상위 스코프의 참조를 자신의 내부 슬롯 [[Environment]]에 저장한다.
• [[Environment]]에 저장되는 값은 상위 스코프에 대한 참조값이고 그 값은 실행 컨텍스트의 최상단에 위치한 현재 실행 중인 실행 컨텍스트의 렉시컬 환경을 가리킨다.

[[Environment]]에 저장되는 값은 결국 현재 실행 중인 실행 컨텍스트의 렉시컬 환경에 대한 참조값이다. 왜 그럴까?

• 함수 정의 평가 과정을 통해 함수 객체가 생성되는 시점은 함수가 정의된 환경, 즉 상위 함수 또는 전역 코드가 평가 또는 실행 중인 시점이다. 이때 실행 컨텍스트의 최상단에 위치한 현재 실행 중인 실행 컨텍스트가 바로 상위 함수 또는 전역 코드의 실행 컨텍스트이기 때문이다.

이전 예제를 다시 보자.

const name = "cabbage";

// 전역 코드 평가 시점에 함수가 평가되고 함수 객체가 생성된다.
// 전역 코드 평가 시점의 현재 실행 중인 실행 컨텍스트는 전역 컨텍스트다.
// 이 함수 객체의 [[Environment]]에는 전역 컨텍스트의 렉시컬 환경에 대한 참조가 저장된다.
function foo() {
  const name = "kabbage";
  bar();
}

// 전역 코드 평가 시점에 함수가 평가되고 함수 객체가 생성된다.
// 전역 코드 평가 시점의 현재 실행 중인 실행 컨텍스트는 전역 컨텍스트다.
// 이 함수 객체의 [[Environment]]에는 전역 컨텍스트의 렉시컬 환경에 대한 참조가 저장된다.
function bar() {
  console.log(`이름: ${name}`);
}

foo(); // 이름: cabbage
bar(); // 이름: cabbage

• 전역 함수 선언문 foo 함수, bar 함수는 전역 코드 평가 시점에 평가되어 함수 객체를 생성한다.
• 이때 생성된 함수 객체의 내부 슬롯 [[Environment]]에는 함수 정의 평가 시점, 즉 전역 코드 평가 시점에서의 현재 실행 중인 실행 컨텍스트인 전역 실행 컨텍스트의 렉시컬 환경의 참조가 저장된다.

이렇게 함수 객체의 내부 슬롯 [[Environment]]에 저장된 렉시컬 환경에 대한 참조값은 자신이 정의된 환경인 상위 스코프를 가리킨다. 그리고 이 값은 결국 함수가 호출되었을 때 함수 실행 컨텍스트가 생성되고 그 실행 컨텍스트가 참조하는 렉시컬 환경의 구성 요소인 '외부 렉시컬 환경에 대한 참조'에 저장될 값이다.

• 함수 정의 평가
  • 함수 객체 생성 -> 함수 객체의 내부 슬롯 [[Environment]]에 현재 실행 중인 실행 컨텍스트의 렉시컬 환경에 대한 참조 저장
• 함수 실행(함수 코드 평가)
  • 함수 실행 컨텍스트 생성 -> 함수 렉시컬 환경 생성 -> 함수 렉시컬 환경의 외부 렉시컬 환경에 대한 참조에 함수 객체의 내부 슬롯 [[Environment]]에 저장된 참조값 할당

함수 코드 평가 과정을 진행하면서 함수 렉시컬 환경의 구성 요소인 외부 렉시컬 환경에 대한 참조에는 함수 객체의 내부 슬롯 [[Environment]]에 저장된 렉시컬 환경의 참조가 할당된다.

결국 함수 객체의 내부 슬롯 [[Environment]]에 저장된 렉시컬 환경에 대한 참조가 함수 정의 위치에 따라 결정되는 상위 스코프가 된다.

참고

• 모던 자바스크립트 Deep Dive - 이웅모