[240126] 실행 컨텍스트 - (1)

실행 컨텍스트(execution context)란?

함수 실행에 대한 세부 정보를 담고 있는 내부 데이터 객체.

동일한 환경에 있는 환경 정보들을 모은 실행 컨텍스트를 콜스택에 쌓아올린 후 실행하여 코드의 환경과 순서를 보장할 수 있게 된다.

 

---

실행 컨텍스트는 언제 생성될까?

하나의 실행 컨텍스트를 구성할 수 있는 방법은 다음과 같다.

• 전역공간 - 자동으로 전역 실행 컨텍스트 생성
• 함수 - 함수 실행 컨텍스트는 함수의 선언이 아닌 실행될 때 생성된다
• eval() 함수
• ES6+에서의 블록({})

 

---

실행 컨텍스트와 콜스택

const x = 1;

function foo() {
  const y = 2;

  function bar() {
    const z = 3;
    console.log(x + y + z);
  }
  bar();
}

foo();

• 함수 내부에 중첩 호출이 있을 때는 아래와 같은 절차가 수행된다.
  • 현재 함수의 실행이 일시 중지
  • 중지된 함수(foo()) 실행 컨텍스트는 콜스택에 저장
  • 중첩 호출(bar())이 실행
  • 중첩 호출 실행이 끝난 이후 콜스택에서 일시 중단한 함수(foo())의 실행 컨텍스트를 꺼내오고, 중단한 함수의 실행을 다시 이어감
• 실행 컨텍스트가 콜스택의 맨 위에 쌓이는 순간이 현재 실행할 코드에 관여하게 되는 시점이다.

 

---

실행 컨텍스트에는 어떤 정보가 있을까? (ES5 이전)

JS 엔진은 실행 컨텍스트를 물리적으로 객체의 형태로 관리하고, 3개의 프로퍼티로 위 정보들을 보관한다.

Variable Object (VO / 변수 객체)

어떤 정보를 담고 있을까

• 변수
• 매개변수, 인수
• 함수 선언

전역 컨텍스트의 경우 VO가 가리키는 객체

• 전역 객체(GO)를 가리킨다.
• 전역 객체는 다음과 같은 프로퍼티를 갖는다.
  • 전역 함수
  • 전역 변수

함수 컨텍스트의 경우 VO가 가리키는 객체

• 활성 객체(AO)를 가리킨다.
• 활성 객체는 다음과 같은 프로퍼티를 갖는다.
  • arguments 객체 - 매개변수, 인수 정보
  • 함수
  • 지역 변수

Scope Chain (SC / 스코프 체인)

• 해당 전역 or 함수 컨텍스트의 변수 객체가 가리키는 전역 객체, 활성 객체의 참조로 이루어진 리스트
• 현재 실행 컨텍스트의 활성 객체 ➡️ 상위 컨텍스트의 활성 객체 ➡️ 전역 객체 순으로 리스트에 담긴다.

this value

• this 값 할당

 

---

실행 컨텍스트에는 어떤 정보가 있을까? (ES6 기준)

• VE와 LE 컴포넌트는 모두 렉시컬 환경 타입이다.

Variable Environment (VE / 변수 환경) 컴포넌트

• 실행 컨텍스트 생성 단계에서 렉시컬 환경 컴포넌트와 같게 설정
• 초기값을 복원할 때 사용
• 선언 시점의 LE의 스냅샷(변경사항 반영 X)

• 구성요소
  • 환경 레코드
  • 외부 렉시컬 환경에 대한 참조

Lexical Environment (LE / 렉시컬 환경) 컴포넌트

• 변경 사항이 실시간으로 반영됨
• 구성요소
  • 환경 레코드
  • 외부 렉시컬 환경에 대한 참조

[240130] 렉시컬 환경, 렉시컬 스코프

 

---

궁금한 점

1️⃣ [변수 환경 / 렉시컬 환경] vs [변수 객체 / 스코프 체인 / this value] 로 실행 컨텍스트의 구성을 소개하는 방법이 나뉘는데, 어떤 차이일까? 처음에는 변수 객체, 스코프 체인, this value가 변수 환경과 렉시컬 환경을 구성하고 있다고 생각했는데, 그것도 아닌 것 같다 ..
2️⃣ 자료를 찾다 보니 렉시컬 환경 컴포넌트(?) 와 렉시컬 환경을 구분하는 경우도 있던데, 어떤 차이인지?

1. 첫번째 질문에 대한 답은 자바스크립트 ES5부터 실행 컨텍스트 개념이 바뀌었기 때문에 저렇게 두가지 버전으로 나오는 것이었다! JS 공식문서를 보고 글을 수정하였다.

2. 변수 환경 컴포넌트 / 렉시컬 환경 컴포넌트는 항상 렉시컬 환경이다.

출처: ECMAScript

➕ this 바인딩에 대한 내용 역시 실행 컨텍스트 구성요소에 들어가는 경우 / 없는 경우 가 있었는데, 공식문서 ES6부터 바뀐 것을 확인할 수 있었다. 렉시컬 환경의 환경 레코드 안에 this에 관한 정보가 포함되므로 빼는게 맞는 것 같다.

ES5

ES6

출처: ECMAScript