실행 컨텍스트란?

📌 코드 실행에 필요한 모든 환경 정보들을 모아놓은 객체

JavaScript는 실행 컨텍스트를 통해 코드를 실행한다.

• 실행 컨텍스트 내부의 렉시컬 환경으로 (변수, 함수, 클래스)를 등록 및 관리
• 실행 컨텍스트가 쌓여있는 스택의 순서로 코드 실행 순서 결정

🔍 실행 컨텍스트의 생성시기

1. JS 엔진이 스크립트를 처음 마주할 때 전역 컨텍스트 생성
2. 이후, 함수 호출을 발견할 때마다 함수 실행 컨텍스트 생성

코드 실행시 처음에 전역 컨텍스트가 만들어지고,

함수 실행 컨텍스트는 함수가 실행될 때마다 만들어져 실행 컨텍스트 스택에 push된다.

---

실행 컨텍스트 스택

먼저, 코드 실행순서를 책임지는 실행 컨텍스트가 쌓여있는 스택이 어떻게 쌓이는지 알아보자

const x = 1;

function foo () {
  const y = 2;
  
  function bar () {
    const z = 3;
    console.log(x + y + z);
  }
  bar();
  
}

foo(); // 6

1. 전역 실행 컨텍스트 생성, 스택에 push
   전역변수 x등록 => 전역함수 foo등록 => 전역변수 x값 할당 => 전역함수 foo호출
2. foo 함수 실행 컨텍스트 생성, 스택에 push
   지역변수 y등록 => 중첩함수 bar등록 => foo함수 실행 => 지역변수 y값 할당 => 중첩함수 bar호출
3. bar 함수 실행 컨텍스트 생성, 스택에 push
   지역변수 z등록 => bar함수 실행 => 지역변수 z값 할당 => console.log 실행 => bar함수 종료
4. bar 함수 실행 컨텍스트 제거, 스택에서 pop
   남아있는 foo 함수 실행 => foo 함수 종료
5. foo 함수 실행 컨텍스트 제거, 스택에서 pop
   남아 있는 전역 코드 실행 => 전역 코드 종료

---

실행 컨텍스트의 구조

✅ VariableEnvironment(변수환경)

• 실행 컨텍스트가 처음 생성될 때 선언된 변수와 함수(var, function)에 대한 정보를 담고 있는 환경

• 코드 실행전에 미리 변수와 함수 정보를 저장하기 때문에 정적인 저장소 역할을 한다. (호이스팅 발생)

✅ LexicalEnvironment(렉시컬 환경)

• 변수, 함수(let, const, 내부함수)의 실제 값에 대한 정보를 저장

• 스코프 체인을 구성하는 핵심 요소

• 처음에는 VariableEnvironment와 같지만 변경 사항이 실시간으로 반영된다.

🔥LexicalEnvironment(렉시컬 환경) 구조

• environmentRecord(환경레코드)

  현재 스코프에 선언된 식별자랑 식별자에 바인딩 값을 key-value형태로 저장하는 객체

• outerEnvironmentReference(외부환경참조)

  상위 스코프의 Lexical Environment을 가리키는 참조값

✅ ThisBinding

this 식별자가 바라봐야 할 대상 객체