[ JavaScript ] 실행 컨텍스트 (Execution Context)

🖥️ 실행 컨텍스트 (Execution Context)란?

자바스크립트 코드가 실행될 때마다 "실행 컨텍스트"라는 실행 환경이 생성되는데
코드가 실행되는 동안 스코프, 변수, 함수 및 this 바인딩 정보를 관리하는데 중요한 역할을 합니다.
실행 컨텍스트는 크게 전역 컨텍스트, 함수 컨텍스트로 나뉘며, 각각 코드의 실행 환경을 설정합니다.
자바스크립트는 단일 스레드로 동작하기 때문에
실행 컨텍스트는 콜 스택(Call Stack)을 통해 순차적으로 처리됩니다.

🔍 실행 컨텍스트 종류

1. 전역 컨텍스트 : 자바스크립트 코드가 로드될 때 가장 먼저 생성되는 실행 컨텍스트이며,
   전역 컨텍스트는 전역 객체인 window 또는 global을 참조하고
   전역에서 선언된 변수와 함수가 이 컨텍스트에 포함됩니다.
2. 함수 컨텍스트 : 함수가 호출될 때마다 새로운 함수 컨텍스트가 생성되고,
   함수 내부의 지역 변수, 함수 인수, 그리고 내부 함수들이 함수 컨텍스트에서 관리됩니다.

⚙️ 실행 컨텍스트 동작 방식

1. 평가 단계 : 코드가 실행되기 전에 자바스크립트 엔진은 실행 컨텍스트를 먼저 평가하는데
   이 과정에서 변수나 함수 선언이 실행 컨텍스트에 기록되며,
   이를 통해 호이스팅(Hoisting)이 일어납니다.
2. 실행 단계 : 평가가 완료된 후, 실제 코드가 실행됩니다.
   이때 변수 선언을 제외한 나머지 코드가 순차적으로 처리되며, 값이 할당되거나 함수가 호출됩니다.

📚 콜 스택 (Call Stack)

실행 컨텍스트는 콜 스택이라는 구조에서 관리는데 콜 스택은
LIFO (Last In First Out) 구조로 가장 마지막에 추가된 실행 컨텍스트가 먼저 실행됩니다.
함수가 호출될 때마다 새로운 실행 컨텍스트가 콜 스택에 쌓이고,
함수 실행이 완료되면 해당 컨텍스트가 스택에서 제거됩니다.
자바스크립트는 단일 스레드 기반 언어이기 때문에, 한 번에 하나의 실행 컨텍스트만 실행됩니다.

📦 렉시컬 환경 (Lexical Environment)

실행 컨텍스트 내부에는 렉시컬 환경이라는 데이터 구조가 존재하는데
이 구조는 변수와 함수 같은 식별자들을 관리하며, 자바스크립트 코드의 상태를 유지합니다.
렉시컬 환경은 두 가지 주요 구성 요소로 나뉩니다.

1. 환경 레코드 (Environment Record) : 현재 실행 중인 코드 블록이나 함수에서 선언된 변수와 함수들이 저장되는 공간입니다.
2. 외부 렉시컬 환경 참조 (Outer Lexical Environment Reference) : 해당 렉시컬 환경이 상위 스코프를 참조할 수 있도록 연결해주는 역할을 합니다.
   이를 통해 상위 스코프에 있는 변수에 접근할 수 있습니다.

렉시컬 환경의 동작 과정

1. 식별자 생성 : 함수나 변수가 선언될 때, 해당 식별자가 렉시컬 환경에 등록됩니다.
2. 외부 환경 참조 설정 : 현재 컨텍스트가 상위 스코프에 접근할 수 있도록 외부 렉시컬 환경이 설정됩니다.

예시코드

// 코드 실행 시 생성되며, globalVariable이라는 전역 변수를 선언
let globalVariable = "global variable";

function parentFunction() {
  // parentFunction 호출 시 새로운 컨텍스트가 생성되고, parentVariable이라는 지역 변수를 선언
  let parentVariable = "parent variable";

	// childFunction은 parentFunction 안에 정의되어 있으며, 호출 시 새로운 컨텍스트가 생성
  function childFunction() {

      let childVariable = "child variable";
      console.log(globalVariable); 
      console.log(parentVariable);  
      console.log(childVariable);  
	  // childFunction 내에서 전역 변수(globalVariable), 외부 함수의 지역 변수(parentVariable), 자신의 지역 변수(childVariable)에 접근 가능
  }
  
  childFunction(); // childFunction 호출
}

parentFunction(); // parentFunction 호출

실행 컨텍스트 : 코드 실행 환경으로, 스코프와 변수 정보를 관리
콜 스택 : 실행 컨텍스트가 쌓이는 구조, 마지막에 추가된 것이 먼저 실행
렉시컬 환경 : 변수와 함수 식별자를 관리하는 데이터 구조
( 변수, 함수들이 어떤 스코프를 참조할 수 있는지 등을 결정 )