18. JS 엔진의 순서

Global Object(Scope) & Global Execution Context

1. 처음 코드가 실행될 때 엔진은 Global Object를 생성한다.

   • 엔진은 Global Object 설정을 시작한다. Global Object의 [[Scope]]는 null이다.

2. Global Context를 생성하고 초기화 작업을 한다.

   1. Global Context의 환경 레코드의 오브젝트 환경 레코드를 Global Object로 잡는다.
   2. 외부 렉시컬 환경 참조는 Global Object의 [[Scope]]값인 null로 한다.

3. Global Context를 Call Stack에 넣고 엔진 컨트롤은 Context 내부로 들어간다.

   실행컨텍스트 초기화 단계

   1. 먼저 한바퀴 돌면서 선언문을 처리한다.
      • function someting() 키워드를 만나면, something이라는 function object를 생성하고 내부 프로퍼티 [[Scope]]에 Global Object를 넣는다. 만약 매개변수가 있다면 내부 프로퍼티[[FormalParameter]]에 배열로 삽입한다.
      • 그리고 Global Context의 환경 레코드의 오브젝트 환경 레코드에에 {함수명 : function Object}를 설정한다. 이것으로, 전역 함수가 설정되었다.
        
   2. 이제 한바퀴 돌면서 표현식을 처리한다.
      • 변수나 함수 선언이 있으면 undefined로 초기화하고 {식별자이름 : undefined} 형태로 Global Context의 환경 레코드의 오브젝트 환경 레코드에 설정된다.
        

   실행컨텍스트 실행 단계

   1. var a = 50과 같은 코드를 만나면, 식별자 a에 대해서 Identifier Resolution을 진행한다. 변수 a에 접근할 수 있으면 값을 50으로 바꿔서 환경 레코드에 업데이트 한다.
   2. var b = function()과 같은 코드를 만나면, 위 선언문에서 function Object를 생성하는 단계와 동일한 과정을 거치고, Global Context의 환경 레코드에 {b : function object} 형태로 업데이트 한다.

Global에서 아래와 같이 함수 호출문을 만났을 경우

4. 엔진이 Global Context를 실행하다 getTotal(value, 10)을 만난 경우

   1. value에 대해서 Identifier Resolution을 실행한다. 현재 Scope에서 찾을 수 있으므로 값 100을 들고 온다.
   2. getTotal에 대해서 Identifier Resolution을 수행한다. 현재 Scope에서 찾을 수 있으므로 값을 들고온다. 이때 값이 Function Object이므로 호출하게 된다.

함수 Context를 생성하는 단계

5. 엔진은 getTotal의 Execution Context를 생성한다.

   1. 렉시컬 환경 컴포넌트: {}를 Context의 프로퍼티로 추가
   2. 변수 환경 컴포넌트 : {}를 Context의 프로퍼티로 추가
   3. This 바인딩 컴포넌트 : {}를 Context의 프로퍼티로 추가
      • getTotal의 경우 Global Scope에 속한다.(즉, Global Object에 바인딩 되어 있다.) 따라서, Global Object를 this로 참조할 수 있도록 This 바인딩 컴포넌트에 Global Object의 Scope({k:v}로 이루어진 것들)를 참조한다.

Function Execution Context 초기화 단계

6. 엔진은 getTotal Execution Context를 초기화한다.
   1. function object의 [[FormalParameter]]에 담긴 인자 값과, 매개변수의 이름을 매핑하여 환경레코드의 선언적 환경 레코드에 저장한다.
   2. 선언문이 있으면 function object를 만들고 셋팅한 후, {함수명:function Object}형태로 환경레코드의 선언적 환경 레코드에 설정
   3. 표현식이 있으면 변수 선언하고 환경레코드의 선언적 환경 레코드에 설정
   4. 외부 렉시컬 환경 참조에는 function object의 [[Scope]]가 들고 있던, 함수 바깥의 변수와 함수의 k/v 쌍을 참조한다.

Function Execution Context의 실행과 종료

7. Execution Context 생성이 완료되면, Call Stack에 Push하고 엔진 컨트롤은 Execution Context 안으로 이동한다.

   1. Context 내부에서 식별자 해결을 하며 코드를 실행한다.
   2. 현재 Context에서 식별자 해결이 되지 않으면, 외부 렉시컬 참조를 Scope로 삼아 식별자 해결을 시도한다.
   3. this가 있으면, this 바인딩 컴포넌트에서 this를 참조한다.
   4. 실행이 다 끝나면 반환값을 렉시컬 환경 컴포넌트에 저장한다.

8. 함수 실행이 끝나면, 엔진은 나중에 함수를 실행할 것을 대비하여, 값이 변한 렉시컬 환경 컴포넌트를 변수 환경 컴포넌트로 덮어씌우며 초기화한다.