실행 컨텍스트(Execution Context)란?
실행 컨텍스트란 자바스크립트 엔진이 코드를 실행하기 위해 필요한 정보들을 가진 환경을 추상화 하기위해 객체 형태로 나타낸 것을 말한다.
위의 내용으로만 실행 컨텍스트를 이해하기는 어려울 수 있다.
차근차근 정리해보며 실행 컨텍스트를 이해해보자.
실행 컨텍스트의 동작 🚀
실행 컨텍스트는 코드들을 실행할 때 필요한 환경 정보들을 모아 객체를 구성하고, 이를 콜 스택(Call Stack)에 쌓아 올린다. 그 후 제일 위에 있는 실행 컨텍스트부터 먼저 실행하고 실행이 완료된 컨텍스트는 제거하는 식의 동작을 한다.
실행 컨텍스트가 실행될 때 선언문들을 위로 끌어올리는 것과 같은 동작을 하는 호이스팅 일어나고, 해당 컨텍스트 내의 스코프나 상위 스코프의 환경 정보를 구성하는 스코프 체이닝도 일어난다. 또 this의 값을 설정하는 this 바인딩도 이 때 구성된다.
var x = 0;
function foo() {
var x = 10;
function bar() {
var y = 1;
console.log(x + y);
}
bar();
}
foo();
console.log(x); 위의 예제를 살펴보자.
처음 자바스크립트 코드를 실행하는 순간 제일 먼저 전역 실행 컨텍스트(Global Execution Context)가 콜 스택에 담긴다. 전역 실행 컨텍스트는 코드 내부에서 별도의 실행 명령이 없어도 브라우저에서 자동으로 실행하므로 자바스크립트 파일이 실행되는 순간 전역 컨텍스트가 활성화 된다고 보면 된다.
브라우저의 경우에는 window 객체가 전역 실행 컨텍스트가 된다고 생각하면 된다.
콜 스택에서 전역 실행 컨텍스트를 실행하다가 foo() 함수를 호출하게 되면 자바스크립트 엔진은 foo함수에 대한 환경 정보를 수집에서 foo 실행 컨텍스트를 생성한 후 콜 스택에 담는다.
위 처럼 실행되고 나면 foo 실행 컨텍스트는 콜 스택 맨위에 담기게 된다. foo 실행 컨텍스트가 맨 위에 있으므로 전역 실행 컨텍스트의 실행을 중지하고 foo 실행 컨텍스트를 먼저 실행 시키게 된다.
foo 실행 컨텍스트를 실행하다가 또, bar() 함수가 실행되면 bar 실행 컨텍스트를 콜 스택 맨 위에 담은 뒤 foo의 실행을 중지하고 bar 실행 컨텍스트를 실행하게 된다.
bar 함수의 실행이 종료되고 나면 bar의 실행 컨텍스트가 콜 스택에서 제거된다. bar 실행 컨텍스트가 제거되고 나면 foo 실행 컨텍스트가 맨 위에 위치하기 때문에 이제 foo 함수를 실행하고 마찬가지로 함수의 실행이 끝나게 되면 해당 실행 컨텍스트는 콜 스택에서 제거된다.
위와 같은 방식을 가진 콜 스택은 LIFO(Last In First Out) 방식의 자료구조를 가지고 있다.
위의 설명한 내용을 이미지로 살펴보면 아래와 같다.
실행 컨텍스트의 구성 📝
-
Lexical Environment: 식별자와 식별자에 바인딩된 값, 그리고 상위 스코프에 대한 참조를 기록하는 자료구조로 실행 컨텍스트를 구성하는 컴포넌트이다. 즉, 렉시컬 환경은 스코프를 구분하여 식별자를 등록하고 관리하는 저장소 역할을 한다.
-
Variable Environment: 현재 컨텍스트 내의 식별자들에 대한 정보와 외부 환경 정보를 가지며, 선언 시점에서는
Lexical Environment와 동일하다. -
This Binding: this 식별자가 바라봐야 할 대상 객체가 결정된다.
실행 컨텍스트를 생성할 때 Variable Environment에 정보를 먼저 담은 후 이를 복사해서 Lexical Environment를 만든다.
정리하자면, Variable Environment는 스냅샷 유지를 목적으로 사용하기 때문에 변경 사항이 반영되지 않고 Lexical Environment는 변경 사항을 실시간으로 반영한다.
이 때문에 주로 사용되는 것은 Lexical Environment이다.
렉시컬 환경(Lexical Environment)
Lexical Environment은 아래 두 개의 컴포넌트로 구성된다.
-
Environment Record: 스코프에 포함된 식별자를 등록하고 등록된 식별자에 바인딩된 값을 관리하는 저장소이다. 이 때 호이스팅 현상이 일어난다.
-
Outer Lexcial Environment Reference: 상위 스코프의 렉시컬 환경을 참조하며 단방향 연결 리스트(Single Linked List)인 스코프 체인을 구현한다.
