실행 컨텍스트

1️⃣ 실행 컨텍스트란?

자바스크립트 엔진이 코드를 실행할 때, 이 코드가 어디서 실행되는지, 어떤 변수에 접근할 수 있는지, this는 무엇을 가리키는지 등의 정보를 알아야 한다. 이 모든 정보를 담고 관리하는 객체가 바로 실행 컨텍스트이다. 코드가 실행되면 이 실행 컨텍스트가 콜 스택(Call Stack)에 쌓이게 된다.

❓ 실행 컨텍스트의 실체

실행 컨텍스트라는 개념은 우리가 console.log 로 찍어볼 수 있다거나 할 수 있는 자바스크립트 객체가 아니다. 실행 컨텍스트는 V8 엔진 내부에서 더 복잡하게 구현되는 추상적인 개념일 뿐이다.

2️⃣ 실행 컨텍스트의 종류

자바스크립트의 실행 컨텍스트는 크게 두 가지로 나뉜다.

1. 전역 실행 컨텍스트 (Global Execution Context)
   • 단 한 번 생성되는 기본 컨텍스트로서, 모든 코드 실행이 끝날 때까지 유지된다. 전역 변수와 전역 함수를 관리한다.
2. 함수 실행 컨텍스트 (Function Execution Context)
   • 함수가 호출될 때마다 해당 함수에 대한 실행 컨텍스트가 생성되고, 함수 실행이 완료될 때까지 유지된다. 함수 내에 선언된 변수와 함수, 매개 변수 등을 관리한다.
3. eval 실행 컨텍스트 (Eval Execution Context)

💡 실행 컨텍스트와 콜 스택

**콜 스택(Call Stack)**은 생성된 실행 컨텍스트를 관리하는 LIFO 구조의 스택이다.

1. 코드가 실행되면, 먼저 전역 실행 컨텍스트가 스택의 가장 아래에 쌓인다.
2. 함수가 호출되면, 해당 함수의 함수 실행 컨텍스트가 생성되어 스택의 최상단에 쌓인다.
3. 스택의 최상단에 있는 컨텍스트가 실행된다.
4. 함수 실행이 완료되면, 해당 함수의 컨텍스트는 스택에서 제거된다.
5. 이전 컨텍스트가 다시 최상단이 되어 실행을 이어간다.

3️⃣ 실행 컨텍스트가 갖는 정보

실행 컨텍스트가 실행되면 1️⃣ 렉시컬 환경을 생성하고 2️⃣ this 바인딩을 한다.

1. 렉시컬 환경 (Lexical Environment) 생성
   • 환경 레코드 (Environment Record)
     • 컨텍스트 내부의 변수와 함수 선언이 관리되는 공간이다.
     • var로 선언된 변수는 undefined로 초기화되어 등록된다.
     • 함수 선언문은 함수 객체 전체가 등록된다.
   • 외부 렉시컬 환경 참조 (Outer Lexical Environment Reference)
     • 현재 컨텍스트의 상위 컨텍스트를 가리키는 참조이다.
     • 현재 컨텍스트에서 변수를 찾지 못하면 이 참조를 따라 올라가며 상위 렉시컬 환경을 탐색한다. → 스코프 체인 (Scope Chain)의 구현 방식
2. 코드가 작성된 문맥을 바탕으로, 다음 두 가지 정보로 구성되는 렉시컬 환경을 생성한다.
3. this 바인딩
4. this 키워드가 가리킬 값을 결정한다.

💡 호이스팅 (Hoisting)과 TDZ (Temporal Dead Zone)

• var 호이스팅
  • 환경 레코드에 등록되고 즉시 undefined로 초기화된다.
  • 선언 전에 접근해도 undefined가 나온다.
• let, const TDZ
  • 환경 레코드에 등록되지만, 초기화되지는 않는다.
  • 실제 선언 코드(let x = 10;)를 만났을 때 초기화되고 값이 할당된다.
  • 환경 레코드에 등록은 되었지만 초기화는 안 된 상태를 **TDZ(Temporal Dead Zone)**라고 부른다. 이 TDZ 구간에서 해당 변수에 접근하면 ReferenceError가 발생한다.

  function foo() {
  	console.log(x); // ReferenceError
  	const x = 1;
  }