실행 컨텍스트 (어렵네 - 수정필요

Hunter Joe·2025년 3월 20일

📌실행 컨텍스트 : Execution Context(EC)

실행 컨텍스트는 JavaScript 코드가 실행되는 환경을 의미한다.
자바스크립트 엔진은 코드를 실행하기 위해 다양한 실행 정보를 저장하고 관리

Ex

var x = 'xxx';

function foo () {
  var y = 'yyy';

  function bar () {
    var z = 'zzz';
    console.log(x + y + z);
  }
  bar();
}
foo();

위 코드를 실행하면 그림과 같이 EC Stack이 생성되고 소멸한다.

실행 컨텍스트의 동작 순서

JavaScript 엔진은 콜 스택(Call Stack, 실행 스택) 을 사용하여 실행 컨텍스트를 관리

1. 글로벌 실행 컨텍스트 (Global Execution Context, GEC)

JS 코드가 실행되면 가장 먼저 생성
window(브라우저 환경) 또는 global(Node.js 환경)이 this로 설정
전역 변수와 전역 함수가 등록된다.(이 때, 동시에 호이스팅도 발생)

2. 함수 실행 컨텍스트 (Function Execution Context, FEC)

함수가 호출될 때마다 새로운 실행 컨텍스트가 생성
콜 스택의 가장 위에 쌓이고, 실행이 끝나면 제거

실행 컨텍스트의 구성 요소

실행 컨텍스트는 생성 단계 → 실행 단계로 나뉜다.

Creation Phase (생성 단계)

전역 실행 컨텍스트 또는 함수 실행 컨텍스트가 생성됨.
변수와 함수 선언을 메모리에 등록 (var는 undefined, let/const는 TDZ).
this 바인딩 결정.

Execution Phase (실행 단계)

코드가 한 줄씩 실행되며 변수에 값 할당.
함수가 호출되면 새로운 실행 컨텍스트가 생성됨.

NOTE
EC가 생성될 때 변수 환경, 렉시컬 환경, this 바인딩이 함께 설정된다.
이들은 실행 컨텍스트 내에서 코드 실행에 필요한 데이터를 관리하는 역할을 한다.

1. 변수 환경(Variable Environment)

var, let, const 선언 변수 저장

함수 선언, arguments 객체 포함

2. 렉시컬 환경(Lexical Environment)

스코프(변수 접근 가능 범위)와 클로저 저장

outer 참조(상위 실행 컨텍스트와 연결된 스코프 체인)

3. this 바인딩(This Binding)

실행 컨텍스트 내에서 this가 어떤 객체를 참조하는지 저장