실행 컨택스트란?

콜 스택

• 스택 구조로 된 자료구조로, 실행 컨택스트를 담는다

콜 스택과 코드 실행

• 자바스크립트 코드를 실행하는 순간, 전역 컨택스트가 콜 스택에 담긴다.
• 함수가 호출되면, JS엔진은 함수에 대한 환경정보를 수집해서 함수를 위한 실행 컨택스트를 생성한 후, 콜 스택에 담는다
• 콜 스택 맨 위에 함수를 위한 실행 컨택스트가 놓여졌으니, 전역 컨택스트 실행을 일시 중단하고 함수의 실행 컨택스트와 관련된 코드를 순차 실행한다.
• 함수 실행이 종료되면, 콜 스택에서 해당 함수의 실행 컨택스트가 제거된다
  현 시점에서 콜 스택 맨위에 있는 실행 컨택스트, 즉 실행을 중단했던 코드부터 실행을 재개한다.
• 전역 공간의 코드도 전부 실행되어 더 이상 실행할 코드가 남아 있지 않게 되면, 전역 컨택스트도 콜 스택에서 제거된다.

실행 컨택스트에 담기는 정보

• 실행 컨택스트가 활성화 될 때, JS 엔진은 해당 컨택스트에 관련된 코드를 실행하는데 필요한 환경 정보를 수집해서 실행 컨택스트 객체에 저장한다.
• 수집하는 정보는 아래와 같다.

  이름	설명
  VariableEnvironment	현재 컨택스트 내의 식별자에 대한 정보와 외부 환경 정보. 선언 시점의 LexicalEnvironment의 스냅샷으로, 변경사항은 반영되지 않는다
  LexicalEnvironment	처음에는 VariableEnvironment와 같지만, 변경 사항이 실시간으로 반영된다는 차이가 있다
  ThisBinding	this 식별자가 바라봐야 할 대상 객체

VariableEnvironment와 LexicalEnvironment

• 둘 다 내부는 environmentRecord와 outerEnvironmentReference로 구성된다
• 초기화 시점엔 둘이 사실상 동일하지만, 코드 진행에 따라 서로 달라지게 된다

LexicalEnvironment

• 한국어로 번역하면 이상해지는데, 그냥 사전적인 환경정보라고 생각하자
• 현재 컨택스트엔 ~라는 식별자가 있고, 외부정보는 ~를 참조하도록 구성되어있다라는, 컨택스트를 구성하는 환경 정보를 사전에서 접하는 느낌으로 모아놓은 것이 바로 LexicalEnvironment이다.
• 다만, 사전적인 이라는 의미는 이해를 돕기 위한 것이니까, 다른 사람들이랑 얘기할땐 LexicalEnvironment이라고 원문 그대로 부르도록 하자

실행 컨택스트 요약

• JS코드 최초 실행 시 콜 스택에 전역 컨택스트가 쌓이고, 함수 호출시 이를 위한 새로운 실행 컨택스트가 생성되어 쌓인다.
• 실행이 끝난 실행 컨택스트는 콜 스택에서 제거되고, 가장 상단에 있는 실행 컨택스트의 실행이 재개된다.
• 콜 스택에 실행 컨택스트가 하나도 남아 있지 않게 되면 프로그램이 종료된다
• 실행 컨택스트엔 VariableEnvironment, LexicalEnvironment, ThisBinding이 담긴다.