실행 컨텍스트(Execution Context)
추상적인 개념
실행할 코드에 제공할 환경 정보들을 모아놓은 객체
Stack, Queue
- Stack: LIFO (Last In First Out)
- Queue: FIFO (First In First Out)
-
Stack에서는 가장 마지막에 들어온 d,c,b,a 순으로 데이터를 꺼낼 수 있습니다. -
Queue에서는 제일 먼저 들어온 a,b,c,d 순으로 데이터를 꺼낼 수 있습니다.
실행 컨택스트의 동작은, 동일한 환경에 있는 코드들을 실행할 때 필요한 환경정보를 모아 컨텍스트를 구성하고,
이를 콜 스택에 쌓아놓은 뒤, 가장 위에 있는 컨텍스트와 관련 있는 코드들을 실행하는 것으로 코드의 환경과 순서를 보장합니다.
실행 컨텍스트의 구성 방법
- 전역 공간 → 자동 실행
- eval() 함수 → 사용을 권장하지 않음
- 함수 → 가장 흔한 실행 컨텍스트 구성 방법
- 블록 → { } 로 둘러 쌓인 코드 내부. ES6 부터 지원
실행 컨텍스트와 콜 스택
// ------------------- (1)
var a = 1;
function outer() {
function inner() {
console.log(a);
var a = 3;
// --------------- (2)
}
inner(); // -------- (3)
console.log(a);
// ----------------- (4)
}
outer(); // ---------- (5)
console.log(a);
// ------------------- (6)- 실행 순서 : (1) → (5) → (3) → (2) → (4) → (6)
-
프로그램 실행: [전역 컨텍스트]
-
outer 실행: [전역 컨텍스트, outer] -> (5)
-
inner 실행: [전역 컨텍스트, outer, inner]-> (3)
-
inner 종료: [전역 컨텍스트, outer] -> (2)
-
outer 종료: [전역 컨텍스트] -> (4)
-
프로그램 종료
실행 컨텍스트의 구조
- 실행 컨텍스트 객체는 활성화되는 시점에
VariableEnvironment,LexicalEnviornment,ThisBinding세 가지 정보 수집합니다.
Variable Environment
-
실행 컨텍스트를 생성할 때, VariableEnvironment에 정보를 먼저 담은 후 이를 그대로 복사해서 LexicalEnvironment를 만들고
이후에 LexicalEnvironment를 주로 활용하게 됩니다. 실행중에도 변경사항이 반영되지 않으며 초기 상태를 유지합니다. -
내부 구성 요소
- 현재 컨텍스트 내의 식별자(변수)들에 대한 정보
- 외부 환경 정보
- 선언 시점의 LexicalEnvironment의 스냅샷 (변경사항 반영 X)
Lexcial Environment
-
LexicalEnvironment의 내부에는 environmentRecord와 outerEnvironmentReference로 구성되어 있습니다.
-
environmentRecord로 인하여 호이스팅이 발생
-
outerEnvironmentReference로 인하여 스코프와 스코프체인이 형성
thisBinding
- 식별자가 바라봐야 할 대상 객체
정리
- 실행할 코드 제공할 환경 정보들을 모아 놓은 객체입니다.
- 실행 컨텍스트 객체는 활성화 되는 시점에 VariableEnvironment, LexicalEnvironment, ThisBinding의 세 가지 정보 수집합니다.
- VariableEnvironment와 LexicalEnvironment는 environmentRecord(매개 변수명, 식별자, 함수명등 수집)와
바로 직전 컨텍스트의 LexicalEnvironment 정보를 참조하는 outerEnvironmentReference로 구성됩니다. - 실행 컨텍스트 생성할 때, VariableEnvironment는 초기상태 유지, LexicalEnvironment는 실행 도중 변경사항 즉시 반영됩니다.
참고
현재 블로그 : https://choi-hyunho.com/