왜 렉시컬 환경과 변수 환경이 분리되어 있을까?

왜 렉시컬 환경과 변수 환경이 분리되어 있을까?

실행 컨텍스트의 정확한 구조

┌─────────────────────────────────────────────────────┐
│              실행 컨텍스트 (Execution Context)       │
├─────────────────────────────────────────────────────┤
│                                                     │
│  1. 렉시컬 환경 (Lexical Environment)               │
│     ├─ 환경 레코드                                  │
│     └─ 외부 환경 참조                               │
│                                                     │
│  2. 변수 환경 (Variable Environment)                │
│     ├─ 환경 레코드                                  │
│     └─ 외부 환경 참조                               │
│                                                     │
│  3. This 바인딩 (This Binding)                      │
│                                                     │
└─────────────────────────────────────────────────────┘

각각의 역할

구성 요소	담당
렉시컬 환경	let, const, 함수 선언문
변수 환경	var
This 바인딩	this 값

왜 렉시컬 환경과 변수 환경이 분리되어 있나?

function example() {
  var a = 1;        // 변수 환경
  let b = 2;        // 렉시컬 환경
  const c = 3;      // 렉시컬 환경
  
  if (true) {
    var d = 4;      // 변수 환경 (함수 스코프)
    let e = 5;      // 새로운 렉시컬 환경 (블록 스코프)
  }
}

블록 스코프 처리 때문입니다.

함수 실행 시:
┌─────────────────────────────────┐
│ 변수 환경 (함수 전체에서 유지)   │
│   a: undefined → 1              │
│   d: undefined → 4              │
├─────────────────────────────────┤
│ 렉시컬 환경                      │
│   b: <TDZ> → 2                  │
│   c: <TDZ> → 3                  │
└─────────────────────────────────┘

if 블록 진입 시:
┌─────────────────────────────────┐
│ 새 렉시컬 환경 (블록용)          │
│   e: <TDZ> → 5                  │
│   외부 참조 → 함수 렉시컬 환경   │
└─────────────────────────────────┘

• 변수 환경: 초기 상태 그대로 유지
• 렉시컬 환경: 블록 진입할 때마다 새로 생성 가능