실행컨텍스트는 자바스크립트의 실행에 근본이 되는 핵심적인 내용이다.
다음 3가지의 목차로 실행컨텍스트를 이해 하도록 정리한다.
실행컨텍스트 (3)-식별자 찾기 + 클로저 👈
🧩 실행컨텍스트란?
- Execution Context 는 실행 가능한 코드가 실행되기 위해 필요한 환경
그렇다면, 실행 가능한 코드란 무엇일까?
- 전역 코드 → 함수 안에서 실행되는 코드가 아닌 모든 전역 객체 window 아래 정의된 코드
- 함수 코드 → 함수안의 코드
- eval 코드 → eval 함수 (렉시컬 환경이아닌 별도의 환경이므로 이포스트에서는 다루지 않는다)
따라서 실행컨텍스트는 3가지의 종류를 갖는다.
Global Execution Context, Functional Execution Context, Eval 이렇게 3가지로 분류 할 수 있다.
🧩 실행컨텍스트의 구성
실행컨텍스트의 자세한 구성에 앞서 전체적인 그림을 먼저 확인한다.
- 실행 가능한 코드를 실행에 필요한 모든 정보를 컴포넌트로 표현한다.
ExecutionContext = { // 실행문맥
LexicalEnvironment: {}, // 렉시컬 환경 컴포넌트
VariableEnvironment: {}, // 변수 환경 컴포넌트
ThisBinding: null, // 디스 바인딩 컴포넌트
}(실제 코드가 아니라 표현을 위한 코드)
위의 구성 컴포넌트들을 하나씩 파헤쳐 본다.
1️⃣ LexicalEnvironment (렉시컬 환경 컴포넌트)
- 함수 또는 블록의 유효 범위 안에 있는 식별자와 결과를 저장하는 곳
자바스크립트 엔진은 코드의 유효 범위 안에 있는 식별자와 값을 key, value로 binding 하여 기록한다.
(EnvironmentRecord → Declarative Environment Record + Object Environment Record)
렉시컬 환경 컴포넌트는 다음과 같이 구성되어 있다.
LexicalEnvironment: { // 렉시컬 환경 컴포넌트
EnvironmentRecord: {}, // 환경 레코드
OuterLexicalEnvironment Reference: {} // 외부 렉시컬 환경 참조
}1️⃣ -1️⃣ EnvironmentRecord (환경 레코드)
환경레코드는 유효 범위 안에 포함된 식별자를 기록 + 실행하는 영역
렉시컬 환경에서의 식별자와 값이 이곳에 기록된다.
1️⃣ -2️⃣ OuterLexcialEnvironment Reference (외부 렉시컬 환경 참조)
함수를 둘러싸고 있는 코드가 속한 렉시컬 환경 컴포넌트의 참조 (주소값)를 저장한다.
자바스크립트 엔진은 외부 렉시컬 환경 참조를 통해 상위 환경을 한 단계씩 검색할 수 있으므로
유효범위 체인 에서 중요하게 사용된다.
EnvironmentRecord(환경 레코드) 를 이루는 요소
환경 레코드는 또 두가지로 나뉜다고 볼 수 있다.
EnvironmentRecord: { // 환경 레코드
DeclarativeEnvironmentRecord: {}, // 선언적 환경 레코드
ObjectEnvironmentRecord: {} // 객체 환경 레코드
}1️⃣ -1️⃣ -1️⃣ DeclarativeEnvironmentRecord (선언적 환경 레코드)
실제 함수와 변수, Catch 문의 식별자와 실행 결과가 저장되는 영역
즉, 식별자와 실행결과를 Key-Value 쌍으로 저장
// 선언적 환경 레코드 예시
DeclarativeEnvironmentRecord: {
a : 1,
b : 2
}1️⃣ -1️⃣ -2️⃣ ObjectEnvironmentRecord (객체 환경 레코드)
실행컨텍스트 외부에 별도로 저장된 객체를 참조할 수 있게 매핑 시키는 부분
bindObject 속성에 바인딩하여 객체의 값을 실제로 Key-Value로 저장하는 것이 아니라 객체 전체의 주소를 저장한다.
// 객체 환경 레코드 예시
ObjectEnvironmentRecord: {
bindObject: someObject
}2️⃣ VariableEnvironment (변수 환경 컴포넌트)
변수 환경 컴포넌트는 LexicalEnvironment(렉시컬 환경 컴포넌트)와 아주 조금의 차이가 있다.
아래와 같은 차이점 이외에는 거의 동일한 구조를 갖는다고 볼 수 있다.
- LexicalEnvironment 는 VariableEnvironment를 참조한다.
- VariableEnvironment 는 Function Level Scope, LexicalEnvironment 는 Block Level Scope 의 변수를 할당 한다.
function test(){
var testA = 1
const testB = 2
if(true){
var testC = 3
let testD = 4
}
}
test()위와 같은 test 함수가 실행 되었다고 했을 때 생성되는 실행컨텍스트를 확인하면,
그림과 같은 구조를 확인 할 수 있다.
이처럼 블록 레벨 ⇒ Lexical Environment, 함수 레벨 ⇒ Variable Environment 을 기억하면 된다.
함수안의 if 블록 안에 있는 testD의 경우 렉시컬 환경으로 outer로 함수안(if문 밖)의 렉시컬 환경을 참조하고,
testB의 경우 outer로 Variable Environment를 참조하며
var 변수로 선언된 testA, testB의 경우 함수 레벨에만 영향을 받기 때문에 함수밖(global)의 outer를 참조한다.
3️⃣ ThisBinding
ThisBinding 컴포넌트는 함수를 호출한 객체의 참조가 저장되는 곳이고, 가리키는 값이 실행컨텍스트의 this가 된다.
🧩 실행컨텍스트 전체 구조 파악하기
- 일반 실행컨텍스트의 구조
- 전역 실행컨텍스트의 구조
References
