저번에 작성했던 자바스크립트의 실행 컨텍스트라는 주제에서 이어서 실행 컨텍스트 구성 요소에 대해 작성한다.

실행 컨텍스트 구성 요소

자바스크립트 엔진은 실행 컨텍스트와 관련된 코드들을 실행하기 위해 필요한 환경 정보들을 수집해서 실행 컨텍스트에 저장한다.

실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 담은 객체의 집합이다. 따라서 실행 컨텍스트에는 실행할 코드에 제공할 환경 정보들이 저장되어야 하는데, 실행 컨텍스트의 구성 요소가 이 환경 정보들을 저장한다.

실행 컨텍스트의 구성 요소는 다음과 같다.

• VariableEnvironment
• LexicalEnvironment
• ThisBinding

VariableEnvironment

실행 컨텍스트 생성 시 VariableEnvironment에 정보를 먼저 담는다. 이를 그대로 복사해 LexicalEnvironment를 만든다.

LexicalEnvironment과 다른 점은 VariableEnvironment는 최초 실행 시점의 스냅샷을 유지한다는 점이다. VariableEnvironment를 그대로 복사해 LexicalEnvironment를 만들기 때문에 두 구성 요소가 담고 있는 내용은 같다.

• environmentRecord
• outerEnvironmentReference(outer 참조)

초기화 과정에서는 동일하지만 코드 진행에 따라 서로 달라지게 된다.

LexicalEnvironment

실행 컨텍스트의 LexicalEnvironment는 실행 컨텍스트를 구성하는 환경 정보들을 모아놓은 것이다.

LexicalEnvironment는 변수 및 함수 등의 식별자 및 외부 참조에 대한 정보를 가지고 있는 구성 요소이다. 예를 들어, 현재 실행 컨텍스트에는 "a, b, c와 같은 식별자들이 존재하고, 외부 정보는 D를 참조하도록 구성되어 있다"라는 환경 정보를 말한다.

LexicalEnvironment는 내부에 2개의 구성 요소를 갖는다.

• environmentRecord
• outerEnvironmentReference(outer 참조)

environmentRecord는 식별자 관련 정보를 저장한다. outer 참조는 외부 LexicalEnvironment를 참조하는 포인터이다.

// 글로벌 스코프
var x = 10;

function foo() {
  // 함수 스코프
  var y = 20;
  console.log(x);
}

위 코드의 경우 아래와 같이 LexicalEnvironment가 구성된다고 볼 수 있다.

globalEnvironment = {
	environmentRecord = { x: 10 },
	outer: null
}
fooEnvironment = {
	environmentRecord = { y: 20 },
	outer: globalEnvironment
}

foo 함수 내부에서 식별자 x를 참조하는 경우, 자신의 environmentRecord에서 먼저 x를 탐색한다. 만약 식별자 x를 자신의 environmentRecord에서 찾지 못하면 outer 참조가 가리키는 globalEnvironment의 environmentRecord를 탐색한다.

ThisBinding

실행 컨텍스트의 ThisBinding에는 this로 지정된 객체가 저장된다.

실행 컨텍스트 활성화 시점에 this가 지정되지 않으면 this에는 글로벌 객체가 저장된다.

• strict mode인 경우 undefined로 바인딩된다.
• 글로벌 객체
  • 브라우저 - window
  • Node.js - global

그밖의 경우에는 함수 호출 방식에 따라 this에 저장되는 대상이 달라진다.

정리

• 자바스크립트 엔진은 실행 컨텍스트와 관련된 코드들을 실행하기 위해 필요한 환경 정보들을 수집해서 실행 컨텍스트에 저장한다.
• 실행 컨텍스트에는 실행할 코드에 제공할 환경 정보들이 저장되어야 하는데, 실행 컨텍스트의 구성 요소가 이 환경 정보들을 저장한다.
• 실행 컨텍스트의 구성 요소
  • VariableEnvironment
  • LexicalEnvironment
  • ThisBinding
• VariableEnvironment는 최초 실행 시점의 스냅샷을 유지한다는 점이 LexicalEnvironment과 다른 점이다.
• LexicalEnvironment는 변수 및 함수 등의 식별자 및 외부 참조에 대한 정보를 가지고 있는 구성 요소이다.
• VariableEnvironment, LexicalEnvironment은 모두 environmentRecord와 outerEnvironmentRecord(outer 참조)를 담고 있다.
  • environmentRecord는 식별자 관련 정보를 저장한다.
  • outer 참조는 외부 LexicalEnvironment를 참조하는 포인터이다.
• 실행 컨텍스트의 ThisBinding에는 실행 컨텍스트 활성화 시점에 this로 지정된 객체가 저장된다. 함수 호출 방법에 따라 달라지고, 지정되지 않은 경우 글로벌 객체가 저장된다.

참고

• 코어자바스크립트 - 정재남