[JavaScript] 실행 컨텍스트 💬

💡 핵심

📌 개념

실행할 코드에 제공할 환경 정보들을 모아놓은 객체

• 자바스크립트에서는 실행 컨텍스트를 콜스택에 쌓아올리고 실행해서, 코드의 환경과 순서를 보장할 수 있게 됨
• FILO(First In, Last Out) 구조

📌 예시

const globalVar = "I am global";

function outerFunction() {
  const outerVar = "I am outer";

  function innerFunction() {
    const innerVar = "I am inner";
    console.log(globalVar);
    console.log(outerVar); 
    console.log(innerVar);
  }

  innerFunction();
}

outerFunction();

1. 전역 컨텍스트가 쌓인다. [Global Execution Context]
   (이때 전역 변수와 함수 선언이 초기화됨)
2. outerFunction()이 호출 → outerFunction 실행 컨텍스트가 생성되어 스택에 추가된다. [Global Execution Context, outerFunction Execution Context]
   (이때 outerFunction의 내부 변수와 함수가 초기화됨)
3. innerFunction()이 호출 → innterFunction 실행 컨텍스트가 생성되어 스택에 추가된다. [Global Execution Context, outerFunction Execution Context, innerFunction Execution Context]
   (이때 innerFunction 내부 변수가 초기화됨.)
   - innerFunction 내부에서 로그를 출력하기 위해 스코프 체인을 따라 필요한 값을 검색함.
   - innerVar : innerFunction의 컨텍스트에서 찾음
   - outerVar : outerFunction의 컨텍스트에서 찾음
   - globalVar : 전역 컨텍스트에서 찾음
4. innerFunction 종료 [Global Execution Context, outerFunction Execution Context]
5. outerFunction 종료 [Global Execution Context]
6. 전역 코드 종료 []

console.log("Start"); // 1

function first() {
  console.log("Inside first");
  second(); // 2
}

function second() {
  console.log("Inside second");
}

first(); // 3
console.log("End"); // 4

1. 전역 컨텍스트 생성 [Global Execution Context]
2. console.log("Start") 실행
3. first()가 호출 → first 실행 컨텍스트가 생성되어 스택에 추가된다. [Global Execution Context, first Execution Context]
4. console.log("Inside first") 실행
5. second()가 호출 → second 실행 컨텍스트가 생성되어 스택에 추가된다. [Global Execution Context, first Execution Context, second Execution Context]
6. console.log("Inside second") 실행
7. second 종료 [Global Execution Context, first Execution Context]
8. first 종료 [Global Execution Context]
9. console.log("End") 실행
10. 전역 코드 종료 []

📌 상태 컴포넌트

모든 실행 컨텍스트는 최소 다음과 같은 state component를 가진다.

component	purpose
code evaluation state	이 실행 컨텍스트와 연관된 코드 평가를 perform, suspend, resume하는 데 필요한 상태
Function	이 실행 컨텍스트가 function 객체의 코드를 평가하는 경우, Function 컴포넌트의 값은 해당 function object. 컨텍스트가 Script나 Module 코드를 평가하는 경우에는 Function 컴포넌트의 값은 null
Realm	연관된 코드가 ECMAScript 리소스에 접근하는 Realm(글로벌 객체, 빌트인 객체 등) Record
ScriptOrModule	연관된 코드가 만들어지는 Module Record 또는 Script Record. InitializeHostDefinedRealm에서 만들어진 실행 컨텍스트처럼 생성된 script나 module이 없는 경우, 값은 null

그리고 ECMAScript 코드 실행 컨텍스트는 다음과 같은 추가 state component를 가진다.
ECMAScript 실행 컨텍스트는, ECMAScript 사양에 따라 실행되는 순수한 ECMAScript 코드만을 대상으로 함

component	purpose
LexicalEnvironment	현재 실행 컨텍스트 내에서 코드가 만든 식별자 참조를 확인하는 데 사용되는 Environment Record 식별
VariableEnvironment	현재 실행 컨텍스트 내에서 VariableStatements에 의해 생성된 바인딩을 보유하는 Environment Record 식별
PrivateEnvironment	가장 가까이에 포함되어 있는 class에서 ClassElements에 의해 생성된 Private Names를 보유하는 PrivateEnvironment Record 식별

JavaScript에서 중간에 실행을 일시 중지하고 재개할 수 있는 특별한 함수인 Generator에서는 또 추가적인 state component를 가진다.

component	purpose
Generator	해당 실행 컨텍스트가 평가되고 있는 Generator

⭐ 참고로 대부분의 인터넷에 나와 있는 문서에서는 실행 컨텍스트 안에 들어가는 정보를 LexicalEnvironment, VariableEnvironment, thisBinding이라고 설명하고 있는데, 이는 최신 정보가 아닌 것 같다.
이는 ES5 기준이고, 공식 문서를 살펴보면 내가 적은 위 내용으로 나와 있다! 다시 한번 공식 문서의 중요성을 깨닫게 되는 경험이었다.

📌 console.log()는 왜 실행 컨텍스트에 쌓이지 않을까?

공부하다 보니 의문점이 생겼다. console.log()도 함수 실행인데 왜 실행 컨텍스트에 쌓이지 않을까?

• console.log는 브라우저(또는 Node.js)의 호스트 환경에서 제공하는 내장 함수로 구현되어 있음
• 이 함수는 자바스크립트 엔진 내부가 아닌, 브라우저의 Web API나 Node.js의 라이브러리에서 실행됨!!

💡 실행 컨텍스트 스택은 자바스크립트 코드(ECMAScript) 내에서만 관리되므로, 호스트 환경에서 제공된 함수의 내부 구현은 실행 컨텍스트 스택에 포함되지 않음

💡 참고 자료

• ECMAScript - Execution Context
• JS Execution Context(실행 컨텍스트)란?
• ECMAScript 버전별 Execution Context 정리