Execution Context 란?

자바스크립트의 실행 컨텍스트(Execution Context)는 코드가 실행되는 환경 또는 영역을 의미합니다.
이는 콜 스택(Call Stack)을 통해 코드의 실행 순서를 관리하고, 변수와 함수를 어떻게 제어할지 결정하는 역할을 합니다.

Execution Context의 대표적인 타입

전역 실행 컨텍스트(Global Execution Context)

오로지 하나만 생성할 수 있으며, 콜 스택(Call Stack)에 가장 먼저 쌓입니다.
전역 변수와 전역 함수 그리고 전역 객체인 window가 포함되어 있습니다.
자바스크립트 코드가 함수 내부에서 실행되지 않는 경우, 해당 코드는 전역 실행 컨텍스트에서 동작합니다.

함수 실행 컨텍스트(Function Execution Context)

함수가 호출될 때마다 해당 함수에 대한 새로운 실행 컨텍스트(Function Execution Context)가 생성되고 콜 스택(Call Stack)에 쌓입니다. 이 과정에서 함수 내부의 변수와 인자, 지역 함수 등이 이 컨텍스트에 포함됩니다.

Eval 실행 컨텍스트(Eval Execution Context)

JavaScript의 특별한 실행 컨텍스트 중 하나로, eval 함수를 통해 실행되는 코드 블록에 대한 컨텍스트입니다. 전역 컨텍스트나 함수 컨텍스트와 비슷하게 동작하지만, 그 자체로 독립적인 스코프를 만들어내는 특징이 있습니다. 다만, eval 함수는 보안 문제와 최적화 어려움 등의 이유로 사용이 지양되는 함수이기에 해당 포스트에서는 서술하지 않겠습니다.

실행 컨텍스트(Execution Context) 내부 정보

var name = 'kimkyungsub';
var job = 'developer';
var age = 25;

function getUser(param) {
	var sex = param;
  
	return {
		name: name, 
		job: job,
		age: age
	};
}

var user = getUser('man');

콜 스택(Call Stack)

콜 스택(Call Stack)은 실행 컨텍스트를 관리하기 위한 자료 구조로, 'Last In, First Out'(LIFO) / 'First In, Last Out'(FILO) 원칙을 따릅니다. 즉, 가장 마지막에 들어간 요소가 가장 먼저 나옵니다.

자바스크립트가 실행되면 가장 먼저 전역 실행 컨텍스트(Global Execution Context)가 생성되어 콜 스택(Call Stack)에 쌓입니다. 이후 함수가 호출되면 각 함수에 대한 함수 실행 컨텍스트(Function Execution Context)가 생성되어 콜 스택(Call Stack)에 추가됩니다.

함수 실행이 완료되면 해당 함수의 함수 실행 컨텍스트(Function Execution Context)는 콜 스택에서 제거됩니다. 이렇게 모든 코드의 실행이 종료되면, 마지막으로 전역 실행 컨텍스트(Global Execution Context)가 콜 스택에서 제거됩니다.

이런 방식으로 콜 스택은 프로그램의 실행 순서를 관리하며, 현재 실행 중인 함수의 실행 컨텍스트를 추적하고, 함수의 호출과 반환을 제어합니다. 이는 자바스크립트의 동기적인 특성을 지원하며, 오류 발생 시 스택 추적(Stack Trace)에 사용되어 디버깅에 도움이 됩니다.

콜 스택(Call Stack) 처리 과정

function firstFunc() { 
  console.log('firstFunc() Call');
  secondFunc(); 
} 

function secondFunc() { 
  console.log('secondFunc() Call');
} 

firstFunc();

Note.

해당 포스트에서는 실행 컨텍스트와 콜 스택에 대한 핵심 내용만 서술하였으며,
this, 호이스팅, 클로저 등 자세한 내용은 개별 포스트에서 서술하겠습니다.