[JS] 실행 컨텍스트

실행 컨텍스트

실행 컨텍스트(Execution Context)는 실행 가능한 코드를 형상화하고 구분하는 추상적인 개념이다.
즉, 실행 가능한 소스 코드를 해석하고 실행하기 위해 필요한 환경을 제공하며 코드의 실행 결과를 실제로 관리하는 환경이다.

실행 컨텍스트의 종류

크게 세 종류의 실행 컨텍스트가 있다.

• 전역 실행 컨텍스트(Global Execution Context) : 어떤 함수에도 포함되지 않는 코드는 전역 실행 컨텍스트에 속한다. 자바스크립트 기본이 되는 컨텍스트이고, 자바스크립트 프로그램에 하나의 전역 실행 컨텍스트만 있다.
• 함수 실행 컨텍스트(Functional Execution Context) : 함수가 호출될 때마다 해당 함수를 위한 새로운 실행 컨텍스트가 생성된다.
• eval 함수 실행 컨텍스트(Eval Execution Context) : eval 함수내에서 실행된 코드들도 자체 실행 컨텍스트를 가진다.

실행 컨텍스트 스택(=실행 스택, ≈콜 스택)

자바스크립트에서는 실행 컨텍스트를 추적하기 위해서 실행 컨텍스트 스택을 사용한다. 실행 컨텍스트 스택은 실행 중에 생성된 모든 컨텍스트들을 저장하는데 Last In, First Out의 스택 자료구조이다.

자바스크립트 엔진이 스크립트를 처음으로 마주하게 되면 전역 실행 컨텍스트를 생성하여 스택에 푸쉬한다. 이후 자바스크립트 엔진이 함수 호출을 발견할 때마다 해당 함수에 대한 실행 컨텍스트를 생성하여 스택의 상단에 푸쉬한다.

스택의 최상단에 있는 실행 컨텍스트의 함수를 실행하고, 함수 실행을 완료하면 스택에서 제거하고 현재 컨텍스트의 아래에 있는 컨텍스트로 컨트롤이 이동한다.

let a = 'Hello World!';
function first() {
  console.log('Inside first function');
  second();
  console.log('Again inside first function');
}
function second() {
  console.log('Inside second function');
}
first();
console.log('Inside Global Execution Context');

위 코드 예시에 대해 아래 이미지로 실행 컨텍스트 스택 안에 실행 컨텍스트가 생성되고 소멸하는 것을 확인할 수 있다.

코드가 브라우저에 로드되면 자바스크립트 엔진은 전역 실행 컨텍스트를 생성하고 현재 실행 스택에 푸쉬한다. first() 함수가 호출될 때 엔진은 함수에 대한 새로운 실행 컨텍스트를 생성하고 현재 실행 컨텍스트 스택의 상단에 푸쉬한다.

second() 함수가 first()함수로부터 호출될 때 엔진은 second() 함수에 대한 새로운 실행 컨텍스트를 생성하고 현재 실행 컨텍스트 스택에 푸쉬한다. sencond() 함수의 동작이 완료되면 함수의 실행 컨텍스트가 현재 스택에서 제거된다. 그리고 제거된 실행 컨텍스트 다음 항목인 first()함수 실행 컨텍스트에 도달한다.

first() 함수가 동작을 완료하면 first() 함수 실행 컨텍스트는 스택에서 제거되고 컨트롤은 전역 실행 컨텍스트에 도달한다. 모든 코드가 실행되면 Javscript엔진은 전역 실행 컨텍스트를 스택에서 제거한다.