Execution Context

김병엽·2024년 7월 23일

JavaScript TIL

What is the Excution Context

실행할 코드에 제공할 환경 정보들을 모아놓은 객체.

자바스크립트는 동일한 환경에 있는 환경 정보들을 모은 실행 컨텍스트를 콜스택에 쌓아올린 후 실행하여 코드의 환경과 순서를 보장.

call stack(콜 스택)

실행 컨텍스트란 실행할 코드에 제공할 환경 정보들을 모아놓은 객체.
그 객체. 즉, 동일 환경에 있는 코드를 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고 ‘스택’의 한 종류인 콜스택에 쌓아올린다.

가장 위에 쌓여있는 컨텍스트와 관련된 코드를 실행하는 방법으로 코드의 환경 및 순서를 보장할 수 있다.

"출처: https://velog.io/@leejuhwan/%EC%8A%A4%ED%83%9DSTACK%EA%B3%BC-%ED%81%90QUEUE"

example

var temp = 'temp';
 
function b (){
  console.log('안녕하세요');
}
 
function a (){
  b();
}
 
a();

"출처: https://gamguma.dev/post/2022/04/js_execution_context

(1) 콜스택엔 전역 컨텍스트를 제외하곤 다른 컨텍스트가 없기에 전역 컨텍스트와 관련된 코드를 진행한다.

(2) 전역 컨텍스트와 관련된 코드를 진행 중 a함수를 실행하였기에 a 함수의 환경 정보들을 수집하여 a 실행 컨텍스트를 생성, 콜스택에 담는다.
콜스택 최상단에 a 실행 컨텍스트가 있기에 기존의 전역 컨텍스트와 관련된 코드의 실행을 일시적으로 중단한 후 a 실행 컨텍스트의 코드를 실행한다.

(3) a 함수 내부에서 b 함수를 실행하였기에 b 함수의 환경 정보들을 수집, 실행 컨텍스트를 생성, 콜스택에 담는다.
이전과 똑같이 콜스택 최상단에 b 실행 컨텍스트가 있기에 기존 a 실행 컨텍스트와 관련된 코드의 실행을 일시적 중단한다.

(4) b 함수가 종료된 후 b 실행 컨텍스트가 콜스택에서 제거된다. 제거 후 콜스택 최상단에는 a 실행 컨텍스트가 있기에 이전에 중단된 지점부터 코드 진행이 재개된다.

(5) a 함수 또한 종료된 후 실행 컨텍스트가 콜스택에서 제거된다. 이후엔 전역 공간에 실행할 코드가 남아있지 않다면 콜스택에서 전역 컨텍스트 또한 제거되며 콜스택에 아무 것도 남지 않은 상태로 종료된다.

Execution Context (실행 컨텍스트) 속엔 어떤 정보가 있을까

실행 컨텍스트 내부엔 variable environment, lexical environment, this binding가 존재.

1. VariableEnvironment

현재 컨텍스트 내부의 식별자 정보(environmentRecord).
외부 환경 정보(outerEnvironmentReference).
선언 시점 LexicalEnvironment의 snapshot.

2. LexicalEnvironment

VariableEnvironment 와 같지만 변경 사항이 실시간으로 적용.
VariableEnvironment 초기 상태를 기억하고 있으며, LexicalEnvironment 최신 상태를 저장.

# environmentRecord

현재 컨텍스트와 관련된 식별자와 식별자에 바인딩된 값이 기록되는 공간.

실행 컨텍스트 내부 전체를 처음부터 끝까지 확인하며 순서대로 수집(코드 실행 X).
console.log(temp); // undefined 
var temp = 'test'; 
선언하기도 전에 값을 호출했는데 Reference error 가 발생하지 않고 undefined(할당되지 않음) 만 출력된다.

자바스크립트의 호이스팅이라는 현상과 관련이 있다.

# 호이스팅

LexicalEnvironment 의 environmentRecord 의 경우 해당 컨텍스트 환경에 필요한 식별자와 식별자의 값이 기록되며, 함수 실행 시 실행 컨텍스트가 생성되므로 (함수 실행보다 environmentRecord 수집이 먼저 되므로) 변수와 같은 식별자를 끌어올리는 것과 같다 라는 개념의 호이스팅이 생겨났다.

호이스팅 법칙

1. 매개변수 및 변수는 선언부를 호이스팅
// 적용 전
function a () {
	var x = 1;
	console.log(x);
	var x;
	console.log(x);
	var x = 2;
	console.log(x);
}
a(1);
// 호이스팅 적용
function a () {
	var x;
	var x;
	var x;
	x = 1;
	console.log(x);
	console.log(x);
	x = 2;
	console.log(x);
}
a(1);
2. 함수 선언은 전체를 호이스팅
// 적용 전
function a () {
	console.log(b);
	var b = 'bbb';
	console.log(b);
	function b() { }
	console.log(b);
}
a();
// 호이스팅 적용
function a () {
	var b; // 변수 선언부 호이스팅
	function b() { } // 함수 선언은 전체를 호이스팅
	console.log(b);
	b = 'bbb'; // 변수의 할당부는 원래 자리에
	console.log(b);
	console.log(b);
}
a();