[Deep Dive] 자바스크립트 실행 컨텍스트란 무엇인가?

실행 컨텍스트(Execution context)란 무엇인가?

💡 실행 컨텍스트란?
코드를 실행하는데 필요한 환경 정보를 제공하는 객체로, 코드 실행 결과와 순서를 관리하는 영역입니다.
식별자와 *스코프는 실행 컨텍스트의 렉시컬 환경에서 관리하고, 코드 실행 순서는 스택으로 관리합니다.

*스코프 : 식별자에 대한 유효범위

 

코드의 평가와 실행

모든 소스코드는 평가와 실행 과정으로 나누어 처리되고, 실행 컨텍스트를 통해 실행되고 관리된다.

- 코드 평가 : 실행 컨텍스트 생성 및 변수, 함수 등의 선언문의 식별자를 실행컨텍스트의 렉시컬 환경(Lexical Environment)의 환경 레코드(Environment Record)에 등록, 스코프 체인 형성, this값 설정

- 코드 실행 : 런타임 시작, 변수나 함수의 참조를 실행 컨텍스트 스코프에서 검색해 선언된 변수인지 확인 및 취득, 실행 결과값을 다시 스코프에 등록

 

 

실행 컨텍스트 스택(= Call Stack)

소스 코드가 평가되면 실행 컨텍스트가 생성되고, 생성된 실행 컨텍스트는 스택 자료구조로 관리하여 코드 실행 순서를 관리한다. 실행 컨텍스트 스택의 최상위 실행 컨텍스트는 언제나 현재 실행 중인 코드의 실행 컨텍스트다. 함수가 종료되면 실행 컨텍스트도 사라진다.(LIFO : Last In First Out 원칙)

https://junvelee.tistory.com/154 

자료구조 - 스택(Stack)과 큐(Queue)

 

 

실행 컨텍스트(Execution context)의 구조

실행 컨텍스트는 코드를 실행하는데 필요한 환경정보를 모아놓은 객체로, 내부는 3가지로 구성되어있다.

1) VE(Variable Environment) 

- environmentRecord(=record) : 현재 컨텍스트와 관련된 식별자와 식별자에 바인딩된 값이 기록 및 수집되는 공간

- outerEnvironmentReference(=outer) : 외부 렉시컬 환경에 대한 참조, 즉 외부 상위 스코프의 렉시컬 환경을 말하며 이를 통해 단방향 링크드 리스트인 스코프체인을 구현한다.

outerEnvironmentReference는 해당 함수가 선언된 위치의 외부 상위 스코프의 LexicalEnvironment를 참조하며, 변수에 접근 시 해당 LexicalEnvironment에서 발견된다면 사용하고, 찾지 못할 경우 outerEnvironmentReference 참조하여 상위 스코프를 탐색하는 과정을 반복합니다. 이러한 과정을 스코프 체인이라고 하며 outerEnvironmentReference를 통해 단방향 링크드 리스트인 스코프체인을 가능케 합니다.

 

2) LE(Lexical Environment)

- 초기에는 VariableEnvironment와 동일하지만, 변경사항이 실시간으로 반영된다. 즉, VariableEnvironment는 초기 상태를 기억(Snap shot)하고 있으며, LexicalEnvironment 최신 상태를 저장하고 있다.

- 실행 컨텍스트를 생성할 때, VariableEnvironment에 정보를 먼저 담은 다음, 이를 그대로 복사해서 LexicalEnvironment를 만들고 이후에는 주로 LexicalEnvironment를 활용한다. = 실시간으로 코드 실행 결과값을 LexicalEnvironment에 저장하고, 스코프 체이닝에서 외부 환경정보로 LexicalEnvironment를 활용한다.

 

3) This binding

- this 식별자가 바라봐야할 객체

 

정리 ✅

💡 실행 컨텍스트란?
코드를 실행하는데 필요한 환경 정보를 제공하는 객체로, 코드 실행 결과와 순서를 관리하는 영역입니다. 식별자와 스코프는 실행 컨텍스트의 렉시컬 환경에서 관리하고, 코드 실행 순서는 스택으로 관리합니다.

실행 컨텍스트는 크게 Variable Environment, Lexical Environment, this binding 등의 3가지로 구성됩니다.

1. VE(Variable Environment) : 초기 상태의 정보를 Snap shot으로 기억하고 있습니다. 
2. LE(Lexical Environment) : 초기에는 VE와 동일하나, 코드 실행의 결과값을 실시간으로 반영합니다.
Lexical Environment는 environmentRecord와 outerEnvironmentReference로 구성되어 있는데, record는 현재 컨텍스트와 관련된 식별자와 식별자에 바인딩된 값이 기록 및 수집되는 공간이고, outer는 외부 렉시컬 환경을 참조합니다. 즉 외부 상위 스코프의 렉시컬 환경을 말하고 이를 통해 단방향 링크드 리스트인 스코프체인을 구현합니다.
3. this binding : this 식별자가 바라봐야할 객체입니다.

*스코프 체이닝 : outerEnvironmentReference는 해당 함수가 선언된 위치의 외부 상위 스코프의 LexicalEnvironment를 참조하며, 변수에 접근 시 해당 LexicalEnvironment에서 발견된다면 사용하고, 찾지 못할 경우 outerEnvironmentReference 참조하여 상위 스코프를 탐색하는 과정을 반복합니다. 이러한 과정을 스코프 체인이라고 하며 outerEnvironmentReference를 통해 단방향 링크드 리스트인 스코프체인을 가능케 합니다.

 

 

알게된점 ✅

1. 전역 컨텍스트의 Global Environment Record에는 전역 변수 뿐만이 아니라, 함수도 포함된다.

2. 전역 컨텍스트의 Global Environment Record는 다시 Object Environment Record(= 객체 환경 레코드 = var로 선언된 변수와 함수 식별자와 바인딩 값, BindingObject에 의해 window객체의 프로퍼티와 메소드로 생성되는)과 Declaretive Enviroment Record(= 선언적 환경 레코드 = let과 const로 선언된 변수와 함수 식별자와 바인딩 값)으로 나누어 진다.

3. 실행 컨텍스트를 테스트 해보기 위해 디버깅 하는 과정에서 혼동이 있었던 부분이 있었다. 개발자 도구의 sourese 탭에서 디버깅할 시, Scopes 내부에서 전역 변수나 함수는 var, let, const 식별자에 따라 구분되어 표시된다. "객체 환경 레코드"는 브라우저에서 V8이 [[Scopes]] 아래의 Global로 표시되고, "선언적 환경 레코드"는 [[Scopes]] 아래의 Script로 표시된다.