"JS 엔진이 소스코드를 평가하고 실행하기 위해 필요한 환경을 관리하는 객체,
그리고 호이스팅 / 스코프 체인 / this 바인딩 / 클로저가
모두 이 안에서 구현되는 방식"

var x; // 평가 단계: x가 환경 레코드에 등록, undefined 초기화
x = 1; // 실행 단계: x에 1 할당

[평가 단계]
환경 레코드: { x: undefined }  ← 선언문만 먼저 실행

[실행 단계]
x = 1 실행 → 환경 레코드: { x: 1 }

실행 컨텍스트
  ├─ LexicalEnvironment
  │     ├─ 환경 레코드 (Environment Record)
  │     │     → 식별자 등록 및 값 관리 (호이스팅 원리)
  │     └─ 외부 렉시컬 환경에 대한 참조 (Outer Lexical Environment Reference)
  │           → 상위 스코프 참조 (스코프 체인 원리)
  └─ VariableEnvironment
        → var 선언 관리 (초기엔 LexicalEnvironment와 동일)

var x = 1;
const y = 2;

function foo(a) {  
  var x = 3;
  const y = 4;

  function bar

[콜스택 변화]

1. 전역 코드 평가 → 전역 실행 컨텍스트 생성 → push
   스택: [ 전역 EC ]

2. foo(10) 호출 → foo 실행 컨텍스트 생성 → push
   스택: [ 전역 EC, foo EC ]

3. bar(20) 호출 → bar 실행 컨텍스트 생성 → push
   스택: [ 전역 EC, foo EC, bar EC ]  ← 현재 실행 중인 컨텍스트

4. bar 종료 → pop
   스택: [ 전역 EC, foo EC ]

5. foo 종료 → pop
   스택: [ 전역 EC ]

6. 전역 코드 종료 → pop
   스택: []

전역 환경 레코드
  ├─ 객체 환경 레코드 (Object Environment Record)
  │     → var 선언 전역 변수, 함수 선언문, 빌트인 전역 프로퍼티/함수 등록
  │     → BindingObject를 통해 전역 객체(window)의 프로퍼티로도 연결됨
  │     → 그래서 var x = 1 → window.x === 1
  └─ 선언적 환경 레코드 (Declarative Environment Record)
        → let, const 선언 전역 변수 등록
        → 전역 객체와 연결되지 않음 → window.y로 참조 불가

함수 환경 레코드
  └─ 선언적 환경 레코드만 존재
        → 함수 내부의 var, let, const, 매개변수 등 모두 여기에 등록
        → 함수 내부 변수가 전역 객체 프로퍼티가 될 이유가 없으니
           객체 환경 레코드가 필요 없음

// 전역
var x = 1;   // 객체 환경 레코드 → window.x === 1
let y = 2;   // 선언적 환경 레코드 → window.y === undefined

console.log(window.x); // 1
console.log(window

console.log(x);   // undefined (var: 등록 + undefined 초기화)
console.log(y);   // ❌ ReferenceError: TDZ (let: 등록만, 초기화 안 됨)
console.log(foo); // function foo() {} (함수 선언문: 함수 객체 통째로 등록)

var x = 1;

[평가 단계] 환경 레코드 상태:
  객체 환경 레코드:
    x: undefined          ← var, undefined 초기화
    foo: function foo(){} ← 함수 선언문, 함수 객체 전체 등록
  선언적 환경 레코드:
    y: <uninitialized>    ← let, TDZ (초기화 안 됨)

var x = 1;
const y = 2;

function foo(a) {
  var x = 3;
  const y = 4;
  
  function bar(

bar 실행 컨텍스트
  렉시컬 환경:
    환경 레코드: { b: 20, z: 5 }
    외부 참조: → foo의 렉시컬 환경
                      │
                      ▼
               foo 실행 컨텍스트
                 렉시컬 환경:
                   환경 레코드: { a: 10, x: 3, y: 4, bar: fn }
                   외부 참조: → 전역 렉시컬 환경
                                     │
                                     ▼
                              전역 실행 컨텍스트
                                렉시컬 환경:
                                  환경 레코드: { x: 1, y: 2, foo: fn }
                                  외부 참조: → null (스코프 체인 종점)

bar 환경 레코드에서 x 탐색 → 없음
      ↓ 외부 참조 따라 이동
foo 환경 레코드에서 x 탐색 → 있음! (x: 3) → 3 반환
(전역의 x: 1은 탐색하지 않음 — foo의 x가 먼저 발견됨)

전역 코드          → this: 전역 객체 (window / global)
일반 함수 호출     → this: 전역 객체 (strict mode에서는 undefined)
메서드 호출        → this: 메서드를 호출한 객체
생성자 함수 호출   → this: 새로 생성된 인스턴스
화살표 함수        → this 바인딩 없음 → 상위 스코프 this 사용

const obj = {
  name: 'foo',
  greet() {
    console.log(this.name); // 메서드 호출 → this = obj
  },
  greetArrow: () 

const x = 1;

function outer() {
  const x = 10;
  const inner = function () {
    console.log(x)

innerFunc
  [[Environment]] → outer의 렉시컬 환경
                          │
                          ▼
                    outer의 렉시컬 환경
                      환경 레코드: { x: 10, inner: fn }
                      (outer EC는 스택에서 제거됐지만
                       innerFunc의 [[Environment]]가 참조 중 → GC 수거 안 됨)

실행 컨텍스트는 JS 엔진이 소스코드를 평가하고 실행하기 위해 필요한
환경을 관리하는 객체입니다.

코드는 평가와 실행 두 단계로 처리되는데요,
평가 단계에서 실행 컨텍스트가 생성되고 변수와 함수 선언문이 먼저 실행되어
렉시컬 환경의 환경 레코드에 등록됩니다. 이게 호이스팅의 실체입니다.

렉시컬 환경은 환경 레코드와 외부 렉시컬 환경에 대한 참조로 구성되는데,
외부 참조가 상위 스코프를 단방향으로 연결해 스코프 체인을 구현합니다.

클로저는 함수가 정의될 때 상위 스코프의 렉시컬 환경을
[[Environment]]에 저장하기 때문에, 외부 함수가 종료된 후에도
참조 중인 렉시컬 환경이 메모리에 유지되어 외부 변수에 접근할 수 있는 것입니다.

실행 컨텍스트는 코드 실행 환경을 관리하는 객체로,
평가 단계에서 식별자를 환경 레코드에 등록하고(호이스팅),
외부 렉시컬 환경 참조로 스코프 체인을 구현합니다.

함수는 정의 시점의 상위 스코프를 [[Environment]]에 저장하기 때문에
렉시컬 스코프가 구현되고, 클로저도 가능합니다.