실행 컨텍스트(Execution Context)

코드 실행환경에 대한 여러가지 정보를 담고 있는 개념. JavaScript 엔진에 의해 만들어지고 사용되는 코드 정보를 담은 객체의 집합.

 

실행 컨텍스트 종류

JavaScript코드는 세가지 종류로 이루어진다. 이 각각의 코드는 자신만의 실행 컨텍스트를 생성한다.

• 글로벌 스코프에서 실행하는 글로벌 코드.
• 함수 스코프에서 실행하는 함수 코드.
• eval()로 실행되는 코드가 있다.

엔진이 스크립트 파일을 실행하기 전, 글로벌 실행 컨텍스트(Global Execution Context)가 생성되고 함수를 호출할 때마다 함수 실행 컨텍스트(Function Execution Context)가 생성된다. 이때 글로벌의 경우, 실행 이전에 생성되지만 함수의 경우 호출할 때 생성된다.

 

실행 컨텍스트 스택 (Execution Context Stack)

실행 컨텍스트가 생성되면 흔히 Call Stack이라고도 불리는 실행 컨텍스트 스택에 쌓이게 된다.

GEC는 코드를 실행하기 전에 쌓이고 모든 코드를 실행하면 제거된다. FEC는 호출할 때 쌓이고 호출이 끝나면 제거된다.

 

실행 컨텍스트 구성요소

• Lexical Environment
  • 변수 및 함수 등의 식별자 및 외부 참조에 관한 정보를 가지고 있는 컴포넌트.
  • var로 선언된 변수를 제외하고 나머지(let 또는 함수 선언문)를 저장한다.
  • 이 컴포넌트는 2개의 구성요소를 갖는다. Environment Record가 식별자에 관한 정보를 가지고 있으며 outer 참조는 외부 Lexical Environment를 참조하는 포인터이다.

 

• Variable Environment
  • Lexical Environment와 동일한 성격을 띠지만 var로 선언된 변수만 저장한다는 점에서 다르다.

 

• this 바인딩
  • 실행 컨텍스트가 생성될 때마다 this객체에 어떻게 바인딩 되는지 나타낸 것.
  • ES6부터 this바인딩이 Lexical Environment안에 있는 Environment Record안에서 일어난다.
    • new 사용했을 때, 해당 객체로 바인딩
    • call, apply, bind 와 같은 명시적 바인딩 사용할 경우, 인자로 전달된 객체에 바인딩
    • 객체의 메소드로 호출할 경우, 해당 객체에 바인딩
    • strict mode일 경우, undefined로 초기화
    • 일반적으로 브라우저라면 window객체에 바인딩

 

실행 컨텍스트 과정

1. Creation Phase (생성단계) : 값이 변수에 매핑되지 않는다.
   
   1. Lexical Environment 생성
   2. Variable Environment 생성
   3. this 바인딩
2. Execution Phase (실행단계) : 코드를 실행하며 변수에 값을 매핑한다.