실행 컨텍스트 (Execution Context)

실행 컨텍스트란?
실행할 코드에 제공할 환경 정보(변수 객체, 스코프 체인, this 등)들을 모아놓은 객체

동일한 환경에 있는 코드를 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고, 이를 콜 스택에 쌓아 올렸다가, 가장 위에 있는 컨텍스트와 관련 있는 코드를 실행 하는 식으로 환경과 순서를 보장한다.

// ---------------------- (1)
var a = 1;
function outer() {
	function inner() {
    	console.log(a); // undefined
        var a = 3;
    }
    inner(); // --------- (2)
    console.log(a); // 1
}
outer(); // ------------- (3)
console.log(a); // 1

위 예시의 실행 순서는 어떻게 될까?

자바스크립트 코드가 실행되는 순간 (1)전역 컨텍스트가 콜 스택에 담긴다. 자바스크립트 파일은 브라우저에서 자동 실행하므로 별도의 실행 명령 없이 최상단에서 전역 컨텍스트가 실행되고 순차적으로 코드를 실행한다.

(3)outer 함수를 호출하면 그에 대한 환경 정보를 수집해서 outer 실행 컨텍스트를 생성하고 콜 스택에 담는다. outer 컨텍스트가 콜 스택의 최상단이기에 전역 컨텍스트의 코드 실행은 일시중단하고 outer 함수의 내부 코드를 순차적으로 실행한다.

이후 (2)inner 함수 호출되어 inner 실행 컨텍스트가 콜 스택의 최상단에 담기면 outer 컨텍스트의 코드 실행은 일시중단하고 inner 함수 내부 코드를 순차적으로 실행한다.

inner 함수의 실행이 종료되면 inner 컨텍스트가 콜 스택에서 제거되고 일시중단되었던 outer 함수의 실행이 이어지고 순차적으로 전역 컨텍스트가 콜 스택에서 제거되면 종료된다.

💡 inner 함수의 console.log(a)가 undefined인 이유는 지역 변수인 a가 호이스팅되어 초기화 되었기 때문

컨텍스트가 생성될 때 수집하는 환경 정보는 다음과 같다.
1. Variable Environment
2. Lexical Environment
3. ThisBinding

환경 정보

1. Variable Envrionment
   현재 컨텍스트 내의 식별자들에 대한 정보 + 외부 환경 정보

   최초 실행 시 LexicalEnvironment의 스냅샷으로, 담기는 내용은 같지만 변경 사항은 반영되지 않는다.

   즉, 실행 컨텍스트를 생성할 때 VariableEnvironment를 만들고, 이후에는 LexicalEnvironment를 주로 활용한다.

2. Lexical Environment

   어휘적 환경으로 직역할 수 있지만 현재 컨텍스트를 구성하는 식별자와 외부 환경에 대한 정보를 알려주는 사전적인 표현이 어울린다. <<코어 자바스크립트>>

   Variable Environment와 내용은 같지만 변경 사항이 실시간으로 반영된다.

   • environmentRecord
     현재 컨텍스트와 관련된 식별자 정보가 저장(매개변수 식별자, 선언한 함수 그 자체, var 변수 식별자 등)

     environmentRecord가 수집되는 과정은 관련된 코드가 실행되기 이전이다. 이는 변수, 함수 등의 선언문을 먼저 실행하는 소스코드의 평과 과정인데 "식별자들을 최상단으로 끌어올린 후 코드를 실행하는 것처럼 동작한다"라고 간주하는 가상의 개념, 호이스팅이라고도 한다.
     

   • outerEnvironmentReference
     호출된 함수의 상위 컨텍스트의 Lexcical Environment를 참조

     • 스코프
       식별자에 대한 유효 범위
     • 스코프 체인
       식별자의 유효범위를 안에서부터 바깥으로 차례대로 검색해 나가는 것

3. ThisBinding
   this(호출한 주체에 대한 정보)로 저장된 객체가 저장된다.

   함수로서 호출하면 전역 객체가, 메서드로 호출하면 . 앞에 명시된 객체가 this가 된다.
   단, 화살표 함수는 this를 바인딩하지 않고 스코프체이닝으로 this를 찾는다

---

정리

실행 컨텍스트는 자바스크립트 파일이 최로로 실행될 때 전역 컨텍스트를 자동으로 생성하고 이후 주로 함수 실행에 의해 생성된다.

실행 컨텍스트를 생성할 때는 VariableEnvironment, LexicalEnvironment, ThisBinding의 세 가지 정보를 수집한다.

VariableEnvironment와 LexicalEnvironment는 동일한 내용으로 구성되지만 LexicalEnvironment는 함수 실행 도중 변경 사항이 즉시 반영된다.

LexicalEnvironment는 매개변수명, 변수의 식별자, 함수명 등을 수집하는 environmentRecord와 상위 컨텍스트의 LexicalEnvironment의 정보를 참조하는 OuterEnvironmentReference로 구성된다.

this에는 실행 컨텍스트를 활성화하는 당시 지정된 this가 저장된다.