자바스크립트에서 매우 중요한 개념이다.
ECMAScript 사양은 소스코드를 4가지 타입으로 구분하고, 실행 컨텍스트를 생성한다

소스코드의 타입	설명
전역코드	전역에 존재하는 소스코드를 말한다. 전역에 정의된 함수 및 클래스 등의 내부 코드는 미포함
함수 코드	함수 내부에 존재하는 소스코드를 말한다. 함수 내부에 중첩된 함수 및 클래스 등의 내부코드는 미포함
eval 코드	빌트인 전역 함수인 eval 함수에 인수로 전달되어 실행되는 소스코드를 말한다.
모듈 코드	모듈 내부에 존재하는 소스코드를 말한다. 모듈 내부의 함수, 클래스 등의 내부 코드는 미포함

소스코드의 평가와 실행

자바스크립트 엔진은 소스코드를 2개의 과정인 "소스코드의 평가"와 "소스코드의 실행" 과정으로 나누어 처리한다.

소스코드 평가 과정에서는 실행 컨텍스트를 생성하고 변수, 함수 등의 선언문만 먼저 실행하여
생성된 변수나 함수 식별자를 키로 실행 컨텍스트가 관리하는 스코프(렉시컬 환경의 환경 레코드)에 등록한다.

평가 과정이 끝나면, 선언문을 제외한 소스코드가 순차적으로 실행되기 시작한다.

즉 이 모든 것을 관리하는 것이 실행 컨텍스트 이며,
실행 컨텍스트는 소스코드를 실행하는 데 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역이다.

실행 컨텍스트 스택

const x = 1;

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

foo(); // 6

위 예제의 소스코드 타입으로 분류할 때 전역코드와 함수 코드로 이루어져 있다.
자바스크립트 엔진은 전역 코드를 평가 후 전역 실행 컨텍스트를 생성하고
함수가 호출되면 함수 코드를 평가하여 함수 컨텍스트를 생성한다.

이때 실행된 실행 컨텍스트는 스택 자료구조로 관리되고

이를 실행 컨텍스트 스택 이라고 부른다.

렉시컬 환경

렉시컬 환경은 식별자와 식별자에 바인딩된 값, 그리고 상위 스코프에 대한 참조를 기록하는 자료구조로 실행 컨텍스트를 구성하는 컴포넌트다.
즉 레시컬 환경은 스코프와 식별자를 관리한다.

실행 컨텍스트는 LexicalEnvironment 컴포넌트와 VariableEnvironment 컴포넌트로 구성된다.

생성 초기에 실행 컨텍스트의 컴포넌트들은 하나의 동일한 렉시컬 환경을 참조한다.

렉시컬 환경은 두 개의 컴포넌트로 구성된다.

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

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

var x = 1;
const y = 2;

function foo(a) {
  var x = 3;
  const y = 4;
  
  function bar(b) {
    const z = 5;
    console.log(a + b + x + y + z);
  }
  bar(10);
}

foo(20); // 42