실행 컨텍스트

실행 컨텍스트는 자바스크립트의 동작 원리를 담고 있는 개념이다.

소스 코드의 타입

1. 전역 코드
2. 함수 코드
3. eval 코드
4. 모듈 코드

소스코드의 평가와 실행

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

소스 코드의 평가 과정: 실행 컨텍스트를 생성하고 변수,함수 등의 선언문만 먼저 실행하여 생성된 변수나 함수 식별자를 키로 실행 컨텍스트가 관리하는 스코프에 등록

소스 코드의 실행 과정: 평가 과정이 끝나고 런타임이 시작되면 변수나 함수의 참조를 실행 컨텍스트가 관리하는 스코프에서 검색한 후 취득한다. 그리고 변수 값의 변경 등 코드의 실행결과는 다시 실행 컨텍스트가 관리하는 스코프에 등록한다.

var x;
x = 1;

먼저 소스코드 평가 과정에서 변수 선언문 var x;를 먼저 실행한다. 이 때 생성된 변수 식별자 x는 실행 컨텍스트가 관리하는 스코프에 등록되고 undefined로 초기화 된다.

이후 실행 과정이 시작되면 변수 할당문 x=1;만 실행이 된다. 이 때 변수에 값을 할당하려면 먼저 x 변수가 선언된 변수인지 확인해야 한다. 이를 위해 x 변수가 선언된 변수인지 확인한다.

x 변수가 선언된 변수라면 값을 할당하고 그 결과를 실행 컨텍스트에 등록하여 관리한다.

실행 컨텍스트의 역할

// 전역 변수 선언
const x = 1;
const y = 2;

// 함수 정의
function foo(a) {
  // 지역 변수 선언
  const x = 10;
  const y = 20;

  // 메서드 호출
  console.log(a + x + y); // 130
}

// 함수 호출
foo(100);

// 메서드 호출
console.log(x + y); // 3

실행 컨텍스트 스택

자바스크립트 엔진은 먼저 전역 코드를 평가하여 전역 실행 컨텍스트를 생성하고, 함수가 호출되면 함수 코드를 평가하여 함수 실행 컨텍스트를 생성한다.

이 때 생성된 실행 컨텍스트는 스택 자료구조로 관리된다. 이를 실행 컨텍스트라 한다.

const x = 1;

function foo () {
  const y = 2;

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

foo(); // 6

위 코드를 실행하면 다음과 같이 실행 컨텍스트가 추가되고 제거된다.

1. 전역 코드의 평가와 실행
2. foo 함수 코드의 평가와 실행
3. bar 함수 코드의 평가와 실행
4. foo 함수 코드로 복귀
5. 전역 코드로 복귀

렉시컬 환경

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

실행 컨텍스트 스택이 코드의 실행 순서를 관리한다면 렉시컬 환경은 스코프와 식별자를 관리한다.

렉시컬 환경은 key와 value를 갖는 객체 형태의 스코프를 생성하여 식별자를 key로 등록하고 식별자에 바인딩된 값을 관리한다. 즉, 스코프를 구분하여 식별자를 등록하고 관리하는 저장소 역할을 한다.

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

1. 환경 레코드: 스코프에 포함된 식별자를 등록하고 등록된 식별자에 바인딩 된 값을 관리하는 저장소
2. 외부 렉시컬 환경에 대한 참조: 상위 스코프를 가리킨다. 상위 스코프는 상위 코드의 렉시컬 환경을 말한다.

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

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

1. 전역 객체 생성
2. 전역 코드 평가
3. 전역 코드 실행
4. foo 함수 코드 평가
5. foo 함수 코드 실행
6. bar 함수 코드 평가
7. bar 함수 코드 실행
8. bar 함수 코드 실행 종료
9. foo 함수 코드 실행 종료
10. 전역 코드 실행 종료