실행 컨텍스트(Execution Context)

📦 컨텍스트

컨텍스트(Context)란 상황, 맥락, 문맥 상의 의미를 의미합니다. 이를 개발자답게 해석해보면, 텍스트의 내용뿐만 아니라, 텍스트가 사용된 상황, 이전 문맥, 이후 맥락 등을 모두 가지고 있는 데이터 묶음을 가리킨다고 할 수 있습니다.

 

컨텍스트의 의미

🚗 JavaScript의 동작 과정

JavaScript를 사용하기 위해서는 코드를 통해 명령어를 나열하며, 이를 활용하여 로직을 수행할 수 있습니다. 이때 코드를 작성하는 행위를 우리가 흔히 아는 코딩(coding)이라고 합니다.

📃 소스코드

JavaScript 뿐만 아니라 여러 개발 언어에서 작성된 코드를 소스코드라고 부릅니다. JavaScript가 동작할 때 크게 소스코드 평가과 소스코드 실행 단계로 나누어 동작하며, 총 4가지의 소스코드 타입을 가지고 소스코드 타입을 바탕으로 컨텍스트를 만듭니다. 여기서 만들어진 컨텍스트를 동작(실행)을 위한 컨텍스트, 즉 실행 컨텍스트라고 부릅니다.

📝 소스코드 평가

소스코드 평가 단계에서는 실행 컨텍스트로 사용할 객체를 생성하고, 작성되어 있는 변수, 함수 등의 선언문을 파악하여 이름(식별자)을 프로퍼티 키로, 선언된 내용을 값으로 프로퍼티 값으로 실행 컨텍스트 객체의 프로퍼티로 등록합니다.

📩 소스코드 실행

소스코드 평가 단계가 끝나면 소스코드 실행 단계가 시작됩니다.

소스코드 실행 단계에서는 소스코드 평가 이후 내용을 진행하며, 주로 할당, 호출 등의 내용이 수행됩니다.

👀 실행 컨텍스트 생성과정 한눈에 보기

JavaScript는 소스코드 평가 단계에서 실행 컨텍스트를 생성하고, 선언문에 해당하는 식별자를 키로 등록합니다. 이후 소스코드 실행 단계에서 등록된 키에 맞는 값을 할당합니다.

📍 소스코드 타입

4가지 소스코드 타입은 소스코드 평가에 의해 각각 전역 실행 컨텍스트, 함수 실행 컨텍스트, eval 실행 컨텍스트, 모듈 실행 컨텍스트가 생성됩니다.

소스코드 타입	설명	생성하는 실행 컨텍스트
전역 코드	전역에 존재하는 소스코드, 전역에 정의된 함수, 클래스 등은 포함되지 않음.	전역 실행 컨텍스트
함수 코드	함수 내부에 존재하는 소스코드, 내부에 정의된 함수, 클래스 등은 포함하지 않음.	함수 실행 컨텍스트
eval 코드	eval 함수에 인수로 전달되어 실행되는 소스코드.	eval 실행 컨텍스트
모듈 코드	모듈 내부에 존재하는 소스코드, 모듈 내부의 함수, 클래스 등은 포함하지 않음.	모듈 실행 컨텍스트

 

📞 호출 스택(Call Stack)

호출 스택이란, JavaScript 동작과정 단계 중, 실행(Runtime)에서 호출한 내용을 담고 있는 스택구조를 말합니다.

JavaScript는 평가 단계에서 만든 실행 컨텍스트를 실행 단계에서 호출하고 호출 스택에 담아 동작합니다. 앞서 배웠던 실행 컨텍스트가 호출 스택에 담으며 가장 최근에 담았던 실행 컨텍스트 내용을 기반으로 동작하고, 실행이 끝난 실행 컨텍스트를 꺼내는 방식으로 동작합니다.

이때 실행 추가된 실행 컨텍스트가 실행 완료되어야 다음 실행 컨텍스트를 진행할 수 있는데, 이를 동기(Synchronous)적으로 실행한다고 말합니다.

📥 스택(Stack)

스택(Stack)이란, 데이터를 저장하는 방법 중 하나로, 차곡차곡 쌓아두고 위에서 부터 사용하는 방식으로 설명할 수 있습니다. 이를 다른 말로 선입후출(First In Last Out) 특징을 가지고 있는 자료구조라고 말할 수 있습니다.

자세한 내용은 아래 글을 참고해보시기 바랍니다.

2026.01.16 - [Algorithm/개념] - [자료구조] 스택(Stack)

 

🚗 호출 스택 동작 과정

예시 코드가 동작하는 과정을 정리해보면 다음과 같습니다.

// 예시 코드
const x = 1;

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

func1(); // 6

 

1. 전역 코드의 평가

 

2. 전역 코드 실행을 위한 전역 실행 컨텍스트를 호출 스택에 추가 및 전역 코드 실행

 

3. 전역 코드 실행 중 func1 함수 호출하여 func1 함수 평가    

4. func1 함수 실행을 위한 func1 실행 컨텍스트를 호출 스택에 추가 및 func1 함수 실행

    
5. func1 함수 실행 중 func2 함수 호출하여 func2 함수 평가

6. func2 함수 코드 실행을 위한 func2 실행 컨텍스트 호출 스택에 추가 및 func2 함수 실행

7. func2 함수 실행 완료 후 호출 스택에서 func2 실행 컨텍스트 제거

    
8. func1 함수 실행 컨텍스트 복귀 및 func1 함수 남은 부분 실행

9. func1 함수 실행 완료 후 호출 스택에서 func1 실행 컨텍스트 제거

    
10. 전역 실행 컨텍스트 복귀 및 전역 코드 남은 부분 실행

    
11. 전역 코드 실행 완료 후 호출 스택에서 전역 실행 컨텍스트 제거

    
12. JavaScript 동작 종료

    

👀 한 눈에 보는 호출 스택 동작 과정 예시