실행 컨텍스트 스택 - 콜 스택

해당 게시물은 모던 자바스크립트 Deep Dive 를 통해 이해한 내용을 정리한 글이다. 자세한 내용은 책을 참고하자.

const x = 1;
function foo() {
  const y = 2;

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

foo();

소스코드는 평가와 실행과정을 거친다.

먼저 전역 실행 컨텍스트가 생성이 되고 전역변수 x와 전역함수 foo 가 전역 실행 컨텍스트에 등록된다. 그 이후에 코드가 실행되면서 x에 값이 할당되고 foo 함수가 호출된다.

foo 함수가 호출되면 foo 함수의 실행 컨텍스트가 생성되고 y와 함수 bar 가 foo 함수의 실행 컨텍스트에 등록된다. 그리고 코드가 실행되면서 y에 2가 할당되고 bar 함수가 호출된다

bar 함수가 호출되면 bar 함수의 실행 컨텍스트가 생성된다. bar 함수의 코드가 실행되면 z에 값이 할당되고 console.log 가 실행된다.
bar 함수가 더 이상 실행할 코드가 없으므로 콜 스택에서 제거된다.
차례대로 foo 함수도 콜 스택에서 제거된다

최종적으로 전역 코드로 복귀하여 전역 실행 컨텍스트도 콜 스택에서 팝되어 콜 스택에 아무것도 남아있지 않게 된다.

렉시컬 환경

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

렉시컬 환경은 환경 레코드와 외부 렉시컬 환경에 대한 참조로 구성되어진다.

환경 레코드는 식별자와 식별자에 바인딩된 값을 관리하는 저장소이다.

const a = 1;
{
  const a = 2;
  {
    console.log(a);
  }
}

첫번째 블럭을 블럭1, 두번째 블럭을 블럭2로 가정하자. 전역 렉시컬 환경의 환경 레코드에는 a=1이 들어가고 외부 렉시컬 환경에 대한 참조는 어떤 것도 가리키고 있지 않다.

블럭1의 렉시컬 환경의 환경 레코드에는 a=2가 들어가고 외부 렉시컬 환경에 대한 참조로 전역 렉시컬 환경을 가리키고 있다. 자바스크립트는 렉시컬 스코프를 따르기 때문에 함수가 어디에서 정의되었는지가 중요하기 때문이다.

블럭2의 렉시컬 환경의 환경레코드에는 식별자가 없으므로 없고 외부 렉시컬 환경에 대한 참조로 블럭1의 렉시컬 환경을 가리키고 있다.

외부 렉시컬 환경에 대한 참조로 체이닝 된 것을 스코프 체이닝이라고 한다.