[JS] 실행 컨텍스트, 스코프 체인, this

🗣️ 실행 컨텍스트와 그 구성 요소인 VariableEnvironment와 LexicalEnvironment의 역할과 차이점에 대해 설명해주세요. 스코프 체인과 this에 대해서도 설명해주세요.

• 의도: 지원자가 자바스크립트의 실행 컨텍스트와 그 구성 요소를 이해하고 있는지 평가

• 팁
  • 실행 컨텍스트의 생성 과정과 VariableEnvironment, LexicalEnvironment의 역할을 설명한다.
  • 스코프 체인과 this의 동작 원리에 대해 간단히 설명한다.

• 모범 답안

  자바스크립트에서 실행 컨텍스트는 코드가 실행되는 환경 정보를 담은 상자입니다.
  함수가 호출될 때마다 하나씩 생성되며, 안에는 VariableEnvironment, LexicalEnvironment, 그리고 this 바인딩 정보가 들어 있습니다.

  VariableEnvironment와 LexicalEnvironment는 모두 식별자(변수, 함수)를 저장하고 관리하는 공간입니다.
  차이점은 시점에 있습니다.

  VariableEnvironment는 컨텍스트가 생성될 때 초기 상태를 저장하는 일종의 스냅샷 역할을 합니다.
  주로 var 변수나 함수 선언이 이 단계에서 등록됩니다.

  반면 LexicalEnvironment는 코드가 실행될 때 참조되는 실제 환경으로, let, const 같은 블록 스코프 변수들이 이곳에 저장됩니다.
  실행 중 새로운 블록이 열리면 LexicalEnvironment가 계속 쌓이며 스코프 체인을 형성하게 됩니다.

  이렇게 만들어진 스코프 체인은 현재 실행 중인 환경에서 식별자를 찾을 때,
  현재 LexicalEnvironment, 외부 LexicalEnvironment, 전역 LexicalEnvironment 순으로 탐색하는 연결 구조입니다.
  자바스크립트는 렉시컬 스코프(정적 스코프)를 사용하기 때문에, 함수가 어디서 정의되었는지에 따라 이 체인이 결정됩니다.

  마지막으로 this는 스코프 체인과는 별개로 동작합니다.
  this는 함수가 어떻게 호출되었는지에 따라 런타임에 결정되며,
  일반 함수 호출 시에는 전역 객체나 undefined, 메서드 호출 시에는 점(.) 앞의 객체, new 호출 시에는 새로 생성된 인스턴스를 가리킵니다.
  단, 화살표 함수는 자신만의 this를 가지지 않고, 정의 당시 상위 스코프의 this를 그대로 상속받습니다.

---

📝 개념 정리

🌟 실행 컨텍스트 (Execution Context)

• 개념
  • 자바스크립트 코드가 실행되는 환경 정보 객체
  • 실행할 코드의 스코프, 변수, this 등의 정보를 담고 있으며, 함수가 호출될 때마다 하나씩 생성되어 콜 스택(Call Stack)에 쌓인다.

• 생성 시점
  1. 생성 단계 (Creation Phase)
     • 변수 선언과 함수 선언이 VariableEnvironment에 등록된다.
     • var 선언은 undefined로 초기화, 함수 선언은 전체 함수 객체로 초기화된다.
  2. 실행 단계 (Execution Phase)
     • 실제 코드가 실행되며, 변수들이 LexicalEnvironment를 통해 참조되고 업데이트된다.

---

🌟 VariableEnvironment (VE)

• 역할
  • 컨텍스트 생성 시점의 변수 선언 정보를 저장하는 환경
  • var 변수와 함수 선언이 이곳에 기록된다.
  • 초기 스냅샷 형태로 한 번 만들어지며, 실행 중에는 갱신되지 않는다.

• 특징
  • 호이스팅(hoisting)은 바로 이 VE에서 발생한다.
  • var가 선언되면 아직 값이 할당되지 않아도 undefined로 미리 메모리에 등록된다.
  • 함수 선언문 역시 미리 저장되어 코드 실행 전에도 참조가 가능하다.

---

🌟 LexicalEnvironment (LE)

• 역할
  • 실행 도중 식별자(변수, 함수, 블록)의 실제 저장소 역할을 하는 환경
  • let, const, class 등이 이곳에 저장된다.
  • 코드 실행 중 {} 블록이나 함수가 생길 때마다 새로운 LE가 생성되어 쌓인다.

• 구조
  LE는 다음 두 가지 구성요소로 이루어진다.
  1. Environment Record: 실제 변수, 함수, 매개변수 등이 저장되는 객체
  2. Outer Environment Reference: 바깥(상위) Lexical Environment를 가리키는 참조
  이 Outer 참조 체인을 통해 스코프 체인이 형성된다.

---

🌟 스코프 체인 (Scope Chain)

• 개념
  • 현재 실행 중인 LexicalEnvironment → 외부 LexicalEnvironment → 전역 LexicalEnvironment 순으로 연결된 참조 구조
  • 변수나 함수를 찾을 때 이 체인을 따라 상위로 탐색한다.

• 특징
  • 렉시컬 스코프(정적 스코프) 기반
    • 함수가 정의된 위치에 따라 스코프 체인이 결정된다.
    • 어디에서 호출됐는지가 아니라 어디에서 정의됐는지로 스코프가 정해진다.
  • TDZ (Temporal Dead Zone)
    • let, const는 선언 전에 접근 시 ReferenceError가 발생한다.
    • LE가 생성되었지만 초기화되지 않은 구간이다.
  • 섀도잉 (Shadowing)
    • 하위 스코프에서 상위 스코프의 동일 이름 변수를 가리는 현상이다.

---

🌟 this 바인딩

this는 스코프 체인과 별도로 존재하며, 함수가 어떻게 호출되었는지(호출 방식)에 따라 런타임에 결정된다.

• 호출 방식별 this 결정 규칙

  호출 방식	this 값	설명
  일반 함수 호출	전역 객체(비엄격) / undefined(엄격)	단순 호출 시
  메서드 호출	점(.) 앞의 객체	obj.method() 형태
  생성자 호출(new)	새로 생성된 인스턴스	new 키워드 사용 시
  명시적 바인딩	직접 지정한 객체	call, apply, bind
  화살표 함수	상위 스코프의 this	렉시컬 this 캡처

• 화살표 함수의 특징
  • 자체적인 this를 갖지 않으며, 정의된 상위 컨텍스트의 this를 상속받는다.
  • 콜백 함수나 클래스 내부에서 this 유지용으로 자주 사용된다.