[JavaScript] 실행 컨텍스트(Execution Context)

이번에는 자바스크립트의 실행 컨텍스트에 대해서 정리해보려 합니다.

실행 컨텍스트를 간단히 설명해보자면,

실행 가능한 코드를 형상화하고 구분하는 추상적인 개념이라고 할 수 있습니다.

 

자바스크립트 엔진에서 코드를 실행하기 위해서는 실행에 필요한 정보들을 알고 있어야 하는데,

이 정보의 종류로는, 

- 변수: 전역 변수, 지역 변수, 매개 변수, 객체의 프로퍼티
- 함수선언
- 변수의 유효범위
- this

가 있습니다.

 

이와 같이, 실행에 필요한 정보를 형상화하고 구분하기 위해서 자바스크립트 엔진은 실행 컨텍스트를 물리적인 객체 형태로 관리합니다.

 

먼저 실행 컨텍스트의 종류에 대해서 알아봅시다!

Global Context(전역 컨텍스트)

함수 안에서 실행되는 코드가 아니라면, 모든 스크립트는 전역 컨텍스트에서 실행됩니다.

스택 구조를 가지는 형태로, 실행 컨텍스트가 생성된 후 Global Object인 Window가 this로 할당되고 스택에 쌓이게 됩니다.

전역 컨텍스트 안에 포함되는 모든 코드들의 실행가능한 코드들은 순서대로 스택에 쌓이게 되고, LIFO로 함수를 실행합니다.

전역 컨텍스트는 <script> 태그를 마주치면, 생성됩니다.

 

Functional Context(함수 컨텍스트)

함수 컨텍스트는 선언된 함수가 호출이 되는 기점으로 생성되고, 함수의 모든 동작이 종료되면 소멸됩니다.

각각의 함수들은 각각의 함수 컨텍스트를 가지지만, 함수가 호출되어야만 생성됩니다.

 

실행 컨텍스트의 종류에 대해 알아봤으니, 실행 컨텍스트 객체를 뜯어봅시다!

실행 컨텍스트는 3가지 프로퍼티를 가집니다.

 

1. Variable Object(변수 객체)

실행 컨텍스트가 생성되면, 자바스크립트 엔진은 실행에 필요한 정보들을 담을 객체를 생성합니다.

이 정보들은 앞에서 언급했던 변수, 함수선언(함수 표현식은 제외), parameters, arguments등이 되겠죠?

2. Scope Chain(스코프 체인)

스코프 체인은 실행 컨텍스트가 참조할 수 있는 변수, 함수 선언 등의 정보를 담고 있는 리스트를 가리킵니다.

상위 함수나 전역 스코프를 참조할 수 있는 이유가 바로 이 스코프 체인이 검색을 하기 때문이죠!

하위 -> 상위 -> 전역 순서로 계속 참조를 이어나가다가 최종적으로 검색에 실패하면, 이는 정의되지 않은 변수에 접근한 것이므로 에러를 발생시킵니다.

 

자바스크립트 엔진은 스코프 체인을 통해 Lexical Scope를 파악하게 됩니다.

3. this 변수

this 변수는 인스턴스화 된 객체 자기 자신을 뜻합니다.

자바스크립트에서의 this는 흔히 객체지향 언어라고 불리는 java의 this와는 조금 다르게 동작하므로 다음에 따로 정리를 하도록 하겠습니다.

 

실행 컨텍스트 객체의 세가지 프로퍼티를 알아봤습니다.

그럼 자바스크립트 엔진이 실행 컨텍스트를 어떻게 만들까요?

이 과정은 Creation Phase, Execution Phase 두 가지로 나눌 수 있습니다.

1. Creation Phase

ExecutionContext = {
  LexicalEnvironment = <ref. to LexicalEnvironment in memory>,
  VariableEnvironment = <ref . to VariableEnvironment in memory>,
}

LexicalEnvironment와 VariableEnvironment 컴포넌트를 생성합니다.

 

Lexical Environment는

• identifier-variable mapping이 되는 곳입니다.
• 즉, 변수와 해당 변수에 대입한 값이 매핑되는 곳입니다.
• 함수 선언과 변수(let, const)의 바인딩을 저장합니다.
• this를 결정합니다.

Variable Environment는

• 함수와 변수식별자가 binding되는 점은 동일합니다.
• 하지만 Variable Environment에서는 변수 var만 저장합니다.

2. Execution Phase

이제 자바스크립트 엔진이 한줄 한줄 위에서 코드를 읽으면서 코드를 실행할 차례입니다.

이 단계에서 중요한것은, 선언했던 변수들에 값이 할당된다는 것입니다.

<script>
    let a = 20;
    const b = 30;
    var c;

    function multiply(e, f){
     var g = 20;
      return e * f * g;
    }
    c= multiply(20,30);
</script>

이 코드에서 일어나는 일을 차례대로 봅시다.

1. 자바스크립트 엔진은 <script> 태그를 만나면 전역 컨텍스트를 만듭니다. 전역변수 a, b, multiply는 lexicalEnvironment에, c는 VariableEnvironment에 매핑됩니다.
2. 전역 컨텍스트의 Execution Phase에서 코드가 실행되고, 각각의 변수에 값이 할당됩니다.
3. multiply() 함수가 호출되는 순간, multiply() 함수의 실행 컨텍스트가 만들어집니다. 외부 환경으로는 전역 컨텍스트를 참조하고 있고, object reference로 호출되지 않았기 때문에 여전히 this는 global object입니다.
4. multiply 함수가 값을 리턴하면서 호출 스택에서 pop됩니다. 전역 컨텍스트에 있던 전역 변수 c에 값이 업데이터 됩니다. 그 후 글로벌 코드가 끝나면 프로그램도 종료합니다.

NOTE

let과 const는 실행 컨텍스트가 만들어질 때 어떠한 값도 가지고 있지 않습니다.

하지만 var은 undefined를 가집니다. 

var로 선언된 변수가 호이스팅이 일어나는 이유와도 연관이 있는데,

 

실행 전에 미리 선언을 다 시켜버리기 때문에 선언이 변수를 사용하는 부분보다 아래에 있더라도 에러가 발생하지 않습니다.

그렇다고 const, let은 호이스팅이 일어나지 않는 것은 아닙니다.

이 두변수는 할당 전까지 TDZ(Temporal Dead Zone)에 머무릅니다. 

어떤 변수가 이 곳에 있는 동안은 스코프 내에 있는 것이라 생각하지 않기 때문에 엔진이 해당 변수를 찾지 못하게 됩니다.