기술면접을 준비하는 과정에서 자바스크립트의 실행 컨텍스트라는 주제에 대해 다시 공부해야 겠다고 생각하고, 이 주제에 대해 다시 작성하기로 하였다.

실행 컨텍스트란?

실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다.

실행 컨텍스트를 간단히 표현한다면 자바스크립트 엔진이 만들고 사용하는 코드 정보들을 담은 객체의 집합이라고 할 수 있다.

자바스크립트 코드에는 3가지 종류가 있다.

• 글로벌(전역) 코드
• 함수 스코프에서 실행하는 함수 코드
• eval() 코드

자바스크립트 코드가 실행되면 종류에 따라 실행 컨텍스트가 생성된다.

자바스크립트 파일이 열리고 자바스크립트 엔진이 자바스크립트 코드를 실행하는 순간 글로벌 실행 컨텍스트(Global Execution Context, GEC)가 생성되고 콜 스택에 담긴다. 자바스크립트 파일이 열리는 순간 글로벌 실행 컨텍스트가 활성화된다고 볼 수 있다.

또한 함수를 호출할 때마다 함수 실행 컨텍스트(Function Execution Context, FEC)가 생성되고 콜 스택에 담긴다.

글로벌 실행 컨텍스트는 자바스크립트 코드 실행 시 자동으로 생성되므로 일반적으로 함수를 실행하여 함수 실행 컨텍스트를 구성하게 된다.

실행 컨텍스트 스택

자바스크립트 코드가 실행되면 글로벌 실행 컨텍스트가 생성되고 콜 스택에 담기며, 함수가 호출되면 함수 실행 컨텍스트가 생성되고 콜 스택에 담긴다.

콜 스택의 최상단에 위치한 실행 컨텍스트가 현재 실행할 코드이다. 콜 스택의 최상단에 위치한 실행 컨텍스트와 관련 있는 코드들을 실행하여 전체 코드의 환경과 순서를 보장한다.

글로벌 실행 컨텍스트가 콜 스택의 최상단에 위치할 때, 즉 콜 스택에 글로벌 실행 컨텍스트만 존재하는 경우, 글로벌 실행 컨텍스트와 관련된 코드들이 순차적으로 실행된다.

글로벌 실행 컨텍스트와 관련된 코드를 실행하다가 함수 a가 호출되면 자바스크립트 엔진은 함수 a에 대한 환경 정보를 수집하고, 수집한 환경 정보를 바탕으로 함수 a 실행 컨텍스트를 생성하고 콜 스택에 담는다.

함수 a 실행 컨텍스트가 콜 스택의 최상단에 위치하게 되면 글로벌 실행 컨텍스트와 관련된 코드 실행을 일시 중단하고, 함수 a 실행 컨텍스트 관련 코드들을 실행한다.

함수 a 실행 컨텍스트와 관련된 코드들을 실행하다가 함수 b가 호출되어도 같은 방식으로 함수 b 실행 컨텍스트가 생성되고 콜 스택에 담긴다. 그리고 함수 a 실행 컨텍스트와 관련된 코드 실행을 일시 중단하고, 콜 스택의 최상단에 위치한 함수 b 실행 컨텍스트 관련 코드들을 실행한다.

함수 b의 실행이 종료되면 함수 b 실행 컨텍스트가 콜 스택에서 제거된다. 다시 함수 a 실행 컨텍스트가 콜 스택 최상단에 위치하므로 일시 중단된 코드 다음 줄부터 이어서 함수 a 실행 컨텍스트 관련 코드를 실행한다.

함수 a의 실행이 종료되면 함수 a 실행 컨텍스트가 콜 스택에서 제거된다. 다시 글로벌 실행 컨텍스트가 콜 스택 최상단에 위치하므로 일시 중단된 코드 다음 줄부터 이어서 글로벌 실행 컨텍스트 관련 코드를 실행한다.

글로벌 공간에 더이상 실행할 코드가 남아 있지 않다면 글로벌 실행 컨텍스트도 콜 스택에서 제거되고, 콜 스택에 아무것도 남아 있지 않아 코드 실행이 종료된다.

정리

• 실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 담은 객체의 집합이다.
• 자바스크립트 코드가 실행되면 종류에 따라 실행 컨텍스트가 생성된다.
  • 글로벌 코드 -> 글로벌 실행 컨텍스트
  • 함수 코드 -> 함수 실행 컨텍스트
• 글로벌 실행 컨텍스트는 자바스크립트 코드 실행 시 자동으로 생성되므로 일반적으로 함수를 실행하여 함수 실행 컨텍스트를 구성하게 된다.
• 자바스크립트 코드가 실행되면 글로벌 실행 컨텍스트가 생성되고 콜 스택에 담기며, 함수가 호출되면 함수 실행 컨텍스트가 생성되고 콜 스택에 담긴다.
• 콜 스택의 최상단에 위치한 실행 컨텍스트가 현재 실행할 코드이다.
• 콜 스택의 최상단에 위치한 실행 컨텍스트와 관련 있는 코드들을 실행하여 전체 코드의 환경과 순서를 보장한다.

참고

• 코어자바스크립트 - 정재남