코어 자바스크립트 - 실행 컨텍스트

 실행 컨텍스트란?

실행 컨텍스트란, 코드가 실행되는 환경(Context) 또는 범위(Scope)를 말합니다.

 

 

좀 더 쉽게 말하자면,

자바스크립트 엔진이 코드를 실행하기 위해 필요한 모든 정보를 담아두는 일종의 "실행 환경 저장소" 입니다.

 

 

 

실행 컨텍스트가 왜 중요할까?

• 자바스크립트는 싱글 스레드 & 비동기 언어입니다.
• 코드가 위에서 아래로 실행되는 동안, 어떤 변수를 쓸 수 있는지, 함수 호출 후 어디로 돌아갈지, this가 무엇을 가리키는지 등을 관리해야 하죠.

이 모든 걸 체계적으로 처리하기 위해 실행 컨텍스트 스택(콜 스택) 을 사용합니다.

 

 

 

실행 컨텍스트의 종류

종류설명

전역 실행 컨텍스트	코드가 시작될 때 기본으로 하나 생성되며, window 또는 global 객체가 포함됨
함수 실행 컨텍스트	함수가 호출될 때마다 새롭게 생성
eval 실행 컨텍스트	eval() 호출 시 생성되지만 거의 사용되지 않음

 

 

실행 컨텍스트의 구성 요소

실행 컨텍스트는 크게 3가지 구성 요소로 나뉩니다:

1. VariableEnvironment (변수 환경)

• 초기 변수 등록을 위한 환경
• var, function 선언 정보 저장
• 초기화 이전의 상태(undefined) 포함

2. LexicalEnvironment (렉시컬 환경)

• 변수나 함수가 정의된 위치에 따라 스코프 결정
• let, const, 함수 선언문 등이 여기에 저장됨
• VariableEnvironment 와 비슷하지만 실행 중엔 LexicalEnvironment가 중심

3. ThisBinding (this 바인딩)

• 현재 컨텍스트에서의 this가 무엇을 가리키는지 저장
• 전역에서는 window, 객체 메서드에서는 해당 객체 등으로 바뀜

 

실행 컨텍스트의 생성 및 실행 과정

실행 컨텍스트는 생성(Create) → 초기화(Initialize) → 실행(Execute) 의 순서를 거칩니다.

▶ 1단계: 생성

• 스코프, 변수, 함수 선언 등이 메모리에 등록됨
• 이때 var는 hoisting되어 undefined로 초기화
• function 은 전체 함수 정의가 올라감

▶ 2단계: 초기화

• let, const 는 아직 초기화되지 않은 상태 (TDZ, 일시적 사각지대)에 있음

▶ 3단계: 실행

• 실제 코드 실행 시작
• 변수 할당, 함수 호출 등 수행

 

예제와 흐름 보기

var a = 1;
function foo() {
  var b = 2;
  console.log(a + b);
}
foo();

 

 

실행 컨텍스트 흐름:

1. 전역 실행 컨텍스트 생성
   • var a → 호이스팅 후 undefined
   • foo → 함수 전체가 등록됨
2. 전역 컨텍스트 실행
   • a = 1
   • foo() 호출 → 새 함수 실행 컨텍스트 생성
3. foo 함수 컨텍스트 생성
   • var b → undefined로 등록
   • 실행하면서 b = 2, console.log(1 + 2) 실행

 

실행 컨텍스트 스택 (콜 스택)

 

[전역 컨텍스트]  ← 최초 진입 시 생성
[foo 함수 컨텍스트] ← foo() 호출 시 push

함수 실행이 끝나면 해당 컨텍스트는 스택에서 pop 됩니다.

 

 

 

 디버깅 시 꼭 알아야 할 포인트

• TDZ(Temporal Dead Zone): let, const는 선언 후 초기화되기 전까지 접근하면 에러 발생
• this 바인딩: 실행 컨텍스트마다 this의 의미가 다를 수 있음
• 호이스팅: var는 선언만, function은 선언 + 정의까지 끌어올려짐

 

 

 정리

용어설명

실행 컨텍스트	자바스크립트 코드 실행에 필요한 정보를 담는 환경
전역 컨텍스트	코드 시작 시 1회 생성되는 기본 컨텍스트
함수 컨텍스트	함수 호출 시마다 새롭게 생성되는 컨텍스트
구성 요소	LexicalEnvironment, VariableEnvironment, ThisBinding
실행 흐름	생성 → 초기화 → 실행
콜 스택	실행 컨텍스트가 push/pop되는 스택 구조