오늘은 지난 시간에 자바스크립트 엔진이 소스 코드를 어떻게 실행하는지 그 과정에 대해서 알아 보았고 실행 컨텍스트가 뭔지 또 어떤 역할을 하는지 알아보았습니다.
요번 시간에는 실행 컨텍스트의 실행컨텍스트 스택과 렉시컬 환경에 대해서 알아보도록 하겠습니다.

---

실행 컨텍스트 스택

개발 공부를 조금이라도 해 본 사람은 스택 자료구조를 들어 봤거나 잘 알 것 입니다. 그래도 간단하게 스택 자료구조에 대해서 알아보도록 하겠습니다.

스택 자료구조는 후입선출이라는 특징을 가지고 있습니다. 영어로는 LIFO(Last Input First Out) 입니다. 가장 마지막에 들어온 데이터가 가장 먼저 나가는 자료구조라고 할 수 있습니다.
쉽게 말해서 어떤 박스에 책을 넣는거라고 보시면 됩니다. 그럼 가장 마지막에 넣은 책이 박스 가장 위에 쌓이겠죠? 책을 꺼낼때도 가장 위에 책부터 꺼내게 될 것 입니다.

전에 시간에 설명했던 것처럼 소스코드의 타입에 따라서 실행컨텍스트가 생성 됩니다. 이때 생성된 실행 컨텍스트를 관리하는 자료구조가 스택이고 이를 실행 컨텍스트 스택 이라고 합니다.
실행 컨텍스트 스택으로 코드의 실행 순서를 관리하게 됩니다.

소스코드의 평가 후 실행 컨텍스트가 생성되고 실행 컨텍스트 스택 최상위에 쌓이게 됩니다. 실행 컨텍스트 스택의 최상위에 존재하는 실행 컨텍스트는 현재 실행 중인 코드의 실행 컨텍스트 입니다. 이를 우리는 실행 중인 실행 컨텍스트라고 부릅니다.

예를 들어

const a = 1;

function func() {
  const b = 2;
  
  function innerFunc() {
    const c = 3;
    console.log(c);
  }
  innerFunc();
}

func();

위의 코드가 실행 컨텍스트 스택의 관점으로 어떻게 실행되는지 그림으로 확인 해 보겠습니다.

위의 그림같이 실행 컨텍스트가 생성되고 실행 컨텍스트 스택에 푸시되어 코드 실행 후 종료되면 실행 컨텍스트 팝이 되고 이전 실행 컨텍스트로 돌아가여 실행되는 방식으로 마지막에 전역 코드가 종료되어 전역 실행 컨텍스트가 스택에서 팝이 되고 아예 종료가 됩니다.

---

렉시컬 환경

렉시컬 환경은 식별자와 식별자에 바인딩된 값 그리고 상위 스코프에 대한 참조를 기록하는 자료구조로 실행 컨텍스트를 구성하는 컴포넌트다.
실행 컨텍스트 스택이 코드의 실행 순서를 관리 한다면 렉시컬 환경은 스코프와 식별자를 관리한다.
실행 컨텍스트에는 LexicalEnviroment 와 VariableEnviroment 두 가지의 컴포넌트가 있다.
두 컴포넌트는 렉시컬 환경 (Lexical Enviroment) 를 참조하고 있는데 상황에 따라서 다른 렉시컬 환경을 생성해서 참조하지만 이해를 위해서 LexicalEnviroment 컴포넌트 기준으로만 설명하겠습니다.
LexicalEnviroment 컴포넌트는 Lexical Enviroment 를 참고하고 있고 렉시컬 환경은 두개의 컴포넌를 구성하고 있습니다.

• 환경 레코드 (Enviroment Record):
  스코프에 포함된 식별자를 등록하고 등록된 식별자에 바인딩된 값을 관리하는 저장소 입니다. 소스코드의 타입에 따라서 환경 레코드의 관리하는 내용의 차이가 있습니다.
• 외부 렉시컬 환경에 대한 참조 (Outer Lexical Enviroment Reference):
  외부 렉시컬 환경에 대한 참조는 해당 실행 컨텍스트의 렉시컬 환경의 상위 렉시컬 환경을 참조한다.
  외부 렉시컬 환경에 대한 참조를 통해 단방향 링크드 리스트인 스코프 체인을 형성하게 됩니다.

실행 컨텍스트 생성과 식별자 검색 과정

이제 하나의 예시인 코드가 어떻게 실행 컨텍스트를 생성하며 코드 실행 과정 중에서 식별자를 어떻게 검색하고 식별자에 값을 바인딩 하는지 알아보도록 하겠습니다.

var a = 1;
const b = 2;

function func(x) {
  var a = 3;
  const b = 4;
  function innerFunc(y) {
    const c = 5;
    console.log(x+y+c);
  }
  innerFunc(3);
}

func(10);

1. 전역 객체 생성
   전역 객체는 전역 코드가 자바스크립트 엔진에 의해 평가되기 이전에 생성된다. 이때 전역 객체에는 빌트인 전역 프로퍼티, 빌트인 전역 함수 , 표준 빌트인 객체, 동작 환경에 따라 클라이언트 사이드 web api 또는 특정 환경을 위한 호스트 객체가 전역 객체에 포함 됩니다.
   전역 객체도 Object.prototype 을 상속 받습니다. 전역 객체도 프로토타입 체인의 일원이라는 뜻 입니다.

2. 전역 코드 평가
   자바스크립트 엔진은 전역 코드 평가를 진행 합니다.
   전역 코드 평가 과정에는

   1. 전역 실행 컨텍스트 생성
   2. 전역 렉시컬 환경 생성 (객체 환경 레코드, 선언적 환경 레코드 생성)
   3. this 바인딩
   4. 외부 렉시컬 환경에 대한 참조 결정
      이렇게 된다.