[모던자바스크립트-DeepDive] 3. 실행 컨텍스트

실행 컨텍스트, execution context는 JS 동작 원리를 담고 있는 핵심 개념이다. 이를 바르게 이해해야 스코프를 기반으로 식별자와 바인딩된 값을 관리하는 방식, 호이스팅의 발생 이유, 클로저의 동작 방식, 그리고 태스크 큐와 함께 동작하는 이벤트 핸들러와 비동기 처리의 동작 방식을 이해할 수 있다.

1. 소스코드 타입

4가지 타입의 소스코드가 존재하며, 각각의 실행 컨텍스트를 생성한다.

2. 소스코드의 평가와 실행

모든 소스코드는 실행에 앞서 평가를 거친다.

평가 과정에서는 실행 컨텍스트를 생성하고 선언문만 먼저 실행하여 생성된 변수나 함수 식별자를 키로 실행 컨텍스트가 관리하는 스코프(렉시컬 환경의 환경 레코드)에 등록한다.

평가 과정이 끝나면 선언문을 제외한 소스코드가 순차적으로 실행된다. 즉, 런타임이 시작되고 이때 소스코드 실행에 필요한 정보, 즉 변수나 함수의 참조를 실행 컨텍스트가 관리하는 스코프에서 검색해서 취득한다. 그리고 변수 값의 변경 등 소스코드의 실행 결과는 다시 실행 컨텍스트가 관리하는 스코프에 등록된다.

3. 실행 컨텍스트 스택

const x = 1;
function foo() {
	const y = 2;
	function bar () {
		const z = 3;
		console.log(x + y + z);
	}
	bar();
}
foo();

위 예제는 소스코드 타입으로 분류할 때 전역 코드와 함수 코드로 이루어져 있다.

JS 엔진은 먼저 전역 코드를 평가하여 전역 실행 컨텍스트를 생성한다.

그리고 함수가 호출되면 함수 코드를 평가해 함수 실행 컨텍스트를 생성한다. 이때 생성된 실행 컨텍스트는 스택 자료구조로 관리된다.

이를 실행 컨텍스트 스택(콜 스택)이라고 부른다.

이렇게 실행 컨텍스트 스택은 코드의 실행 순서를 관리한다. 실행 컨텍스트 스택의 최상위에 존재하는 실행 컨텍스트는 언제나 현재 실행 중인 코드의 실행 컨텍스트다. 따라서 실행 컨텍스트 스택 최상위에 존재하는 실행 컨텍스트를 실행 중인 실행 컨텍스트(running execution context)라 부른다.