[JS] 실행 컨텍스트

이번 시간에 살펴볼 것은 자바스크립트 개념 중 하나인 실행 컨텍스트에 대해 알아보도록 하겠습니다.

실행 컨텍스트란?

실행 컨텍스트란 실행 코드에 제공할 정보들을 모아 놓은 객체입니다. 무슨 말인지 아직 감이 잘 안오실 겁니다. 이 실행 컨텍스트는 아래와 같이 자바스크립트 코드를 실행 시 자바스크립트 엔진의 스택에 쌓게 됩니다.

실행 컨텍스트가 생성되는 시점?

실행 컨텍스트가 생성되는 시점은 다음과 같은 경우 생기게 됩니다.

위의 4 가지 케이스에서 생기게 되는데요. 먼저 가장 기본적으로 실행 컨텍스트가 생기는 것은 바로 전역 공간에서 anonymous func() 실행 컨텍스트가 스택에 쌓입니다. 그 이후 코드 상 함수, { } 코드 블럭을 사용할 때도 하나의 실행 컨텍스트로 보고 콜 스택에 차례로 쌓이게 됩니다. 여기서 eval 이라는 함수도 실행 컨텍스트가 만들어지긴 하지만 잘 안쓰이고 지양하는 코딩 방법이기 때문에 흔히 볼수는 없을 것입니다.

자 그럼 아래 코드를 통해 스택의 변화를 살펴보도록 하겠습니다.

// ------------------------ (1)
var a = 1;
function outer() {
   function inner() {
      console.log(a);
      var a = 3;
      // ------------------ (2)
   }
   inner(); // ------------ (3)
   console.log(a);
   // --------------------- (4)
}
outer(); // --------------- (5)
console.log(a);
// ------------------------ (6)

위의 코드가 실행 되는 시점에 자바스크립트 엔진 에서는 실행을 위한 실행 컨텍스트의 정보들을 아래와 같이 스택에 먼저 쌓게 됩니다.

코드에 사이 사이에 삽입한 숫자를 토대로 어떤 순차로 스택에 실행 컨텍스트를 쌓게 되는지 위에서 확인 할 수 있습니다. inner 함수 까지 쌓은 실행 컨텍스트의 정보는 inner 함수 실행 후 종료 시 스택에서 제거해 나갑니다. 그 다음은 outer 함수를 스택에서 제거하고 마지막은 전역 컨텍스트를 실행 컨텍스트에서 제거하면서 스택에 컨텍스트들이 없어지게 됩니다.

대부분 자바스크립트를 엔진에서 파싱하면서 코드를 실행 할 때 스택의 변화는 위와 같다라고 볼 수 있을 것입니다.

실행 컨텍스트의 구조

그렇다면 실행 컨텍스트를 구성하는 구조는 어떻게 되는지 아래 그림을 보고 살펴보도록 하겠습니다.

실행 컨텍스트는 크게 Variable Environment, Lexical Environment, thisBinding 이 세 가지의 정보를 가지고 있다라고 볼 수 있습니다.

Variable Environment 와 Lexical Environment 의 내부에는 envrionmentRecord 와 outerEnvironmentReference 의 객체를 가지고 있다는 부분에서 동일하지만 Variable Environment 는 최초의 스냅샷의 개념으로 변경되는 컨텍스트 정보에 대해 업데이트를 하지 않습니다.

여기서 각 실행 컨텍스트를 구성하는 범위를 Scope 이라고 하면 상위 Scope 과 하위 Scope 이 존재할텐데 이 Scope 을 연결하여 현재 Scope에서 선언되지 않는 변수를 호출 한다면 상위에서 찾을 수 있도록 outerEnvironmentReference 가 스코프체인을 구성할 수 있도록 주소를 참조하게 됩니다. environmentRecord 의 경우 해당 컨텍스트에서 선언된 변수 식별자 정보들이 저장되어 있다. thisBinding 은 현재 이 컨텍스트가 어떤 this 를 바인딩하고 있는지 정보를 가지고 있는데 자바스크립트의 경우 this 가 바라보는 것이 일반적인 언어와 약간 다른데 그 부분은 나중에 언급하도록 하겠다. 기본적으로 this 를 명시하지 않으면 전역객체를 바라보게 되어있다.

이번 시간에 살펴본 것은 자바스크립트에서 코드를 실행할 때 실행 컨텍스트가 무엇인지 그리고 스택에 어떠한 순서대로 쌓는지 그리고 실행 컨텍스트가 구성하는 정보가 어떤 것들이 있는지를 살펴보았다.