[JavaScript] 실행 컨텍스트

코어 자바스크립트 2강 - 실행컨텍스트

 

실행 컨텍스트

실행 컨텍스트란, 실행할 코드에 제공할 환경 정보들을 모아놓은 객체를 의미한다.

그 유명한 스코프와 클로저 라는 개념을 이해하기 전에 알아야 하는 개념.

 

우리가 다음과 같은 JS파일을 실행한다고 가정해보자.

//--------------------(1)
var a = 1;
function outer() {
  function inner() {
    console.log(a); // undefined
    var a = 3;
  }
  inner(); //--------------------(2)
  console.log(a); // 1출력
}

outer(); //--------------------(3)
console.log(a); //1

파일이 실행되자마자 (1)순간 콜 스택에 전역컨텍스트가 쌓인다. 그리고 맨 아래쪽 (3)의 outer함수가 콜스택에 쌓이는데, 이 말은 JS가 outer의 실행에 필요한 환경 정보를 수집해서 outer 실행 컨텍스트를 콜 스택에 담는다는 말이다. 코드를 진행하다보면 실행 컨텍스트가 콜스택에 담기고 그 컨텍스트에 관한 작업을 하게되는흐름!

이제 콜스택에 담긴 outer 실행컨텍스트와 관련된 코드, 즉 outer 함수를 실행한다. 이렇게 되면 똑같이 inner의 실행 컨텍스트가 콜스택에 담기고, inner 실행 컨텍스트에 의해 inner 함수가 호출되는것임.

 

outer, inner같은 실행 컨텍스트들이 활성화가 될 때, JS 엔진은 관련 코드를 실행하기 위한 환경정보를 수집해서 실행 컨텍스트 객체에 저장한다.

여기에 담기는 정보들이

VariableEnvironment

LexicalEnvironment

ThisBinding

이다.

 

VariableEnvironment

VariableEnvironment에 담기는 내용은 LexicalEnvironment와 같지만, 최초 실행시의 스냅샷을 유지한다는 점이 다르다.

실행컨텍스트 라는걸 생성할 때 VariableEnvironment에 정보를 먼저 담고, 이걸 복사해서 Lexical을 만들어서 주로 활용한다.

 

Lexical Environment

"현재 컨텍스트 내부에는 a,b,c와 같은 식별자들이 있고, 외부정보는 D에서 참조하도록 구성되어있다."라는 컨텍스트 구성 환경 정보들을 모아놓은것.

VariableEnvironment와 LexicalEnvironment의 내부는 EnvironmentRecord와 outer-EnvironmentReference로 구성됨.

그래서 EnvironmentRecord가 뭐냐면

현재 컨텍스트와 관련된 코드의 식별자 정보가 들어간다. 뭐 예를들면 함수에 지정된 매개변수, 함수 내부의 선언된 함수가 있다면 그 함수 자체, 혹은 var로 선언된 변수 등... 이들을 순서대로 수집한다.

 

이 수집 과정은 코드를 실행하기 전에 진행되는데, 그래서 등장하는 개념이 호이스팅이다.

 

결론

파일을 실행하면 전역 컨텍스트 위에 함수들 실행 컨텍스트가 콜스택에 쌓이게 되고, 이 실행 컨텍스트에 따라 함수들이 실행이 된다. 특히 새 실행 컨텍스트가 콜스택에 쌓이면 그 새로 온 컨텍스트 내의 함수를 실행하게 된다.

이때 필요한 정보들은 실행 컨텍스트 객체에 저장되고, 거기에 Variable Environment, Lexical Environment, This Binding이라는 애들이 저장된다.

Lexical Environment에 뭐가 저장되나 뜯어보니 현재 컨텍스트와 관련된 식별자 정보를 수집하였고 이 수집은 코드 실행 전에 이뤄지므로 호이스팅이 가능하다.