[JavaScript] 실행 컨텍스트의 생성과정 (Creation Phase, Execution Phase)

아래 영상을 보고 정리한 내용입니다 ! : )

 

먼저 전역 컨텍스트 하나 생성 후, 함수 호출 시마다 함수단위로 컨텍스트가 생긴다.

Creation Phase | 생성단계

  1     Activation Object 또는 Variation Object가 생성된다 

   - Variation Object

        : 일반 스코프 영역에서 생성되는 실행 컨텍스트의 변수 객체 

   - Activation Object

      : Variation Object의 종류인데, 전역 스코프 영역에서 생성되는 실행 컨텍스트의 변수 객체

 

var, let, const로 선언된 변수(명시적 변수)들이 지역,전역 상태에 따라 위의 각 Object에 추가된다.

호이스팅이 일어나는 상황이고, 변수명을 key가 되고, value는 일단 undefind로 할당된다.

Execution Phase에서 실제 값이 채워지게 된다.

함수를 값으로 가진 변수라면 함수가 저장된 데이터 위치를 갖는다.

 

   - argumentObj

        : Activation Object 또는 Variation Object 내부에 있는 객체로, argument에 대한 값이 저장됨.
          argument를 받는 함수의 경우에는 해당하는 argument와 length를 갖는다.

  2     scope chaine이 생성된다.

  3      this값을  정한다.

 

 

Execution Phase | 실행단계

 

Creation Phase가 만들어 진 후에 Execution Phase 단계로 넘어간다.

undefind였던 변수의 값들을 할당하며 코드를 실행시킨다.

 

암묵적 전역변수

var, let, const로 선언되지 않은 변수(암묵적 변수)는 이 단계에서 할당되면서 선언된다.
또한 이런 변수들은 전역 객체의 프로퍼티가 되기 때문에 이름처럼 암묵적 전역 변수 라고 한다.

암묵적 전역 변수 예시

 

 

 

컨텍스트 생성 예시

실행 코드

---

Creation Phase 실행

---

Creation Phase가 끝난 후 상태 ( 전역 컨텍스트 )

 

 

Creation Phase가 끝난 후 상태 ( 함수 컨텍스트 ) - 18번째 줄 dFunc 실행 시점

함수가 호출되는 순간에 Functional Execution Context가 생성되는데,

같은 Creation Phase여도 아래의 e값에는 값이 할당되어 있는걸 볼 수 있다.

이유는, e는 argumentObj내부에도 있는것을 보아 argument로,
함수 실행시 parameter로 해당 값을 받았기 때문에 이 단계에서도 값을 알고 있는 것이다.

 

---

Execution Phase 실행

---

Execution Phase가 끝난 후 상태 ( 전역 컨텍스트 )

Execution Phase가 끝난 후 상태 ( 함수 컨텍스트 )  - 18번째 줄 dFunc 실행 시점

 

       * dFunc가 실행되고, 이후에 15번째 줄에서 cFunc가 실행 되는 부분은 생략했으나 위의 dFunc 컨텍스트 생성 과정과 같다.

 

---

✔️ 참고

https://medium.com/@happymishra66/execution-context-in-javascript-319dd72e8e2c

https://www.youtube.com/watch?v=SpHiBkjuwQM