컨텍스트(Context)란 우리말로 하면 '문맥', '맥락'이라는 뜻을 가진다. 실행 컨텍스트라는 말 자체를 놓고 본다면 무언가를 실행하는 맥락이라는 의미로 프로그래밍에서 이 무언가는 코드를 가리키므로 결국 실행 컨텍스트는 코드를 실행하는데 필요한 맥락이라고 이해할 수 있다. 말이나 글에서 맥락을 파악하는게 중요하듯이, 실행 컨텍스트도 자바스크립트라는 언어를 이해하는데 있어 핵심적인 개념 중 하나이다.
실행 컨텍스트(Execution Context)
소스코드를 실행하는데 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역
식별자를 등록하고 관리하는 스코프와 코드 실행 순서의 관리를 구현한 메커니즘
자바스크립트는 실행 컨텍스트가 활성화되는 시점에 선언된 변수를 호이스팅 하고, 외부 환경 정보를 구성하고, this 값을 바인딩하는 등의 동작을 수행함.
소스코드의 평가와 실행
소스코드의 종류
-
전역 코드 : 전역에 존재하는 소스코드 ⇒ 전역 변수를 관리하기 위해 최상위 스코프인 전역 스코프 생성
-
함수 코드 : 함수 내부에 존재하는 소스코드 ⇒ 지역 스코프를 생성하고 지역 변수, 매개변수, arguments 객체 관리
-
eval 코드 : 빌트인 전역 함수인 eval 함수에 인수로 전달되어 실행되는 소스코드 ⇒ strict mode에서 독자적인 스코프 생성
-
모듈 코드 : 모듈 내부에 존재하는 소스코드 ⇒ 모듈별로 독립적인 스코프 생성
❗️ 각 소스코드의 내부 코드는 포함되지 않음. ex) 전역 내의 함수나 클래스, 함수 내의 중첩 함수
자바스크립트 엔진이 코드를 실행하는 과정
전역 코드 평가 ➡️ 전역 코드 실행 ➡️ 함수 코드 평가 ➡️ 함수 코드 실행
// 전역 변수 선언 - 전역 스코프 등록
const x = 1;
const y = 2;
// 함수 정의 - 전역 스코프 등록
function foo(a) { // 매개 변수 - 지역 스코프 등록
// 지역 변수 선언 - 지역 스코프 등록
const x = 10;
const y = 20;
// 메서드 호출 - 스코프 체인을 통해 식별자 검색
console.log(a + x + y); // 60 출력
}
// 함수 호출
foo(30);
// 메서드 호출
console.log(x + y); // 3 출력실행 컨텍스트의 구성 컴포넌트
LexicalEnvironment
실행 컨텍스트를 구성하는 환경 정보들을 담고 있음. ⇒ 현재 컨텍스트 내의 식별자들에 대한 정보+외부 환경 정보
실행 컨텍스트의 변경 사항이 실시간으로 반영됨.
VariableEnvironment
LexicalEnvironment와 내용은 같지만 최초 실행 시의 '스냅샷(snapshot)'만을 유지함.
실행 컨텍스트를 생성할 때, 처음에 VariableEnvironment에 정보를 담은 뒤 이를 그대로 복사하여 LexicalEnvironment를 만듦.
ThisBinding
this 식별자가 참조할 대상 객체를 담고 있음.
💡 식별자와 스코프는 실행 컨텍스트의 렉시컬 환경으로, 코드 실행 순서는 실행 컨텍스트 스택으로 관리
렉시컬 환경(Lexical Environment)
식별자와 식별자에 바인딩된 값, 상위 스코프에 대한 참조를 기록하는 자료구조 ⇒ 스코프와 식별자를 관리
key:value를 갖는 객체 형태의 스코프를 생성하여 식별자를 key로 등록하고 식별자에 바인딩된 값을 관리함.
렉시컬 스코프(Lexical Scope)
스코프를 구분하여 식별자를 등록하고 관리하는 저장소 역할을 함.
렉시컬 환경의 구성 컴포넌트
환경 레코드(EnvironmentRecord)
스코프에 포함된 식별자를 등록하고 등록된 식별자에 바인딩된 값을 관리하는 저장소
외부 렉시컬 환경에 대한 참조(Outer Lexical Environment Reference)
외부 렉시컬 환경이란 해당 실행 컨텍스트를 생성한 소스코드를 포함하는 상위 코드의 렉시컬 환경을 의미하며, 외부 렉시컬 환경에 대한 참조는 상위 스코프를 가리킴. ⇒ 스코프 체인 구현
// Source Code
var a = 100;
var b = 100;
var c = 100;
function foo() {
var b = 10;
function bar() {
var c = 10;
//...
}
bar();
//...
}
foo();
//...
// Environment
GlobalEnvironment = {
environmentRecord: {
a: 100,
b: 100,
c: 100,
foo: [Function]
},
outer: null
};
fooEnvironment = {
environmentRecord: {
b: 10,
bar: [Function]
},
outer: GlobalEnvironment
};
barEnvironment = {
environmentRecord: {
c: 100
},
outer: fooEnvironment
};
실행 컨텍스트 스택(Execution Context Stack)
자바스크립트 엔진은 우선 전역 코드를 평가하여 전역 실행 컨텍스트를 생성함.
함수가 호출되면 함수 코드를 평가하여 함수 실행 컨텍스트를 생성함.
실행 중인 실행 컨텍스트 : 실행 컨텍스트 스택의 최상위에 존재하는 실행 컨텍스트
let a = 'Hello World!';
function first() {
console.log('Inside first function');
second();
console.log('Again inside first function');
}
function second() {
console.log('Inside second function');
}
first();
console.log('Inside Global Execution Context');
// 출력되는 순서
// Inside first function
// Inside second function
// Again inside first function
// Inside Global Execution Context
실행 컨텍스트 생성 과정
전역 객체 생성
전역 코드 평가
- 전역 실행 컨텍스트 생성
- 전역 렉시컬 환경 생성
- 전역 환경 레코드 생성
- 객체 환경 레코드 생성
- 선언적 환경 레코드 생성
- this 바인딩
- 외부 렉시컬 환경에 대한 참조 결정
- 전역 환경 레코드 생성
전역 코드 실행
함수 코드 평가
- 함수 실행 컨텍스트 생성
- 함수 렉시컬 환경 생성
- 함수 환경 레코드 생성
- this 바인딩
- 외부 렉시컬 환경에 대한 참조 결정
함수 코드 실행
함수 코드 실행 종료
전역 코드 실행 종료
💡 실행 컨텍스트 생성 과정에 대한 자세한 설명은 도서 ⌜모던 자바스크립트 Deep Dive⌟의 368p ~ 386p 참고!
Ref
[도서] 송형주/고현준, ⌜인사이드 자바스크립트⌟, 한빛미디어, 2014
[도서] 정재남, ⌜코어 자바스크립트⌟, 위키북스, 2019
[도서] 이웅모, ⌜모던 자바스크립트 Deep Dive⌟, 위키북스, 2020
[블로그] Understanding Execution Context and Execution Stack in Javascript
[블로그] (JavaScript) 실행 컨텍스트 - 클로저와 호이스팅
[블로그] JS 실행 컨텍스트
[블로그] Execution Context와 Lexical Environment
